/*---------------------------------------------
Template Name: Cirkle Social Media Community HTML Template
更多精品模板：http://www.bootstrapmb.com
Description: Social Media and Community HTML Template
Version: 1.0.0
===================   
CSS INDEX
===================
1. Typography
2. Bootstrap Overwrite
	2.1 Form
    2.2 Grid
3. Vendor Custom Style
    3.1 Slick
    3.2 Select 2
4. Template Layout Style
	4.1 Back To Top
	4.2 Breadcrumb Banner
    4.3 Footer
    4.4 Global
    4.5 Helper Classes
    4.6 Header Menu
    4.7 Pagination
    4.8 Preloader
    4.9 Section
5. Template Page Style
	5.1 About
	5.2 Banner
	5.3 Blog
	5.4 Community
	5.5 Contact Us
	5.6 Groups
	5.7 Location
	5.8 Team
	5.9 Testimonial
	5.10 Why Choose Us
	5.11 Login Page
6.  Dashboard
	6.1 Banner
	6.2 Blocks
	6.3 Forum
	6.4 Post
	6.5 Product
	6.6 Search
	6.7 User Activity
	6.8 Widget 
--------------------------------------------*/
/*=======================================================================
1. Typography 
=========================================================================*/
body {
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #646464;
  font-weight: 400;
  height: 100%;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #ffffff;
}
p {
  margin: 0 0 10px 0;
  color: #646464;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
  margin: 0 0 10px 0;
  font-weight: 700;
  line-height: 28px;
  color: #000000;
}
h1 {
  font-size: 46px;
  line-height: 52px;
}
@media {
  only {
    screen {
      and {
        (max-width {
          &: {
            1199px) {
              h1 {
        font-size: 44px;
              h2 {
        font-size: 34px;
              h3 {
        font-size: 26px;
              .breadcrumbs-banner {
        padding: 165px 0 75px;
              .breadcrumbs-banner .breadcrumb-animate-img {
        right: -10%;
              bottom: -10%;
              .footer-wrap .footer-top-image li: nth-child(8n) {
        display: none;
              .footer-wrap .footer-top-image li: nth-child(9n) {
        display: none;
              .footer-dashboard .main-footer {
        padding-top: 100px;
              nav.template-main-menu > ul > li > a {
        padding: 40px 10px;
              .rt-sticky nav.template-main-menu > ul > li > a {
        padding: 30px 10px;
              .header-action ul .header-social {
        display: none;
              .fixed-header .navbar .nav-top-menu {
        display: none;
              .fixed-header .header-control .dropdown-admin .dropdown-menu: before {
        left: auto;
              right: 65px;
              .section {
        padding: 92px 0 80px;
              .about-us {
        padding: 100px 0 90px;
              .hero-banner {
        padding: 180px 0 100px;
              .hero-banner .hero-content .item-number {
        font-size: 38px;
              .hero-banner .leftside-image {
        display: none;
              .banner-newsletter {
        padding: 95px 0 190px;
              .banner-apps .banner-content .item-title {
        font-size: 36px;
              .community-network {
        padding: 100px 0;
              .community-network .community-content .item-title {
        width: 100%;
              .testimonial-carousel {
        padding: 95px 0 80px;
              .why-choose-fluid .why-choose-content {
        padding-left: calc(100% - 465px);
              padding-right: 30px;
              .why-choose-us {
        padding: 100px 0 50px;
              .why-choose-us .why-choose-box p {
        width: 100%;
              .why-choose-us .why-choose-box .features-list: before {
        left: -17%;
              .newsfeed-banner .media-body .item-title {
        font-size: 28px;
              .product-breadcrumb {
        padding: 100px 0;
              .single-product .product-content .action-area {
        margin-top: 50px;
              .user-top-header .menu-list li a {
        font-size: 13px;
              padding: 15px 10px;
              .user-top-header .menu-list .dropdown .dropdown-toggle: before {
        height: 35px;
              width: 35px;
              top: 20px;
              left: -1px;
              .user-timeline-header .menu-list li {
        margin-right: 15px;
              .user-timeline-header .menu-list li a {
        font-size: 13px;
              .user-timeline-header .header-dropdown label {
        font-size: 14px;
              .user-timeline-header .header-dropdown .dropdown-toggle {
        font-size: 14px;
              .user-single-blog .blog-content-wrap {
        padding: 30px;
              .user-single-blog .blog-entry-header .entry-meta li {
        margin-right: 15px;
              .widget {
        padding: 25px 25px 35px;
            }
            575px) {
              h4 {
        font-size: 20px;
              .header-action ul .login-btn a {
        padding: 6px 25px;
              .header-search .header-search-form input[type="search"] {
        width: 75%;
              .fixed-header .header-control .dropdown .dropdown-menu: before {
        right: auto;
              left: 50px;
              .fixed-header .header-control .dropdown-friend .dropdown-menu {
        left: -75px;
              .fixed-header .header-control .dropdown-cart .dropdown-menu {
        left: -40px;
              .fixed-header .header-control .dropdown-message .dropdown-menu {
        left: -105px;
              .about-us .about-us-content .media {
        margin-right: 10px;
              .about-us .about-us-img .item-img {
        display: block;
              .contact-page .contact-box-wrap .contact-box .item-title {
        font-size: 20px;
              .groups-popular .groups-box .item-img img {
        width: 100%;
              .why-choose-us .why-choose-box .features-list .item-icon {
        height: 100px;
              width: 100px;
              font-size: 40px;
              .login-page-wrap {
        height: 100%;
              position: inherit;
              .login-page-wrap .content-wrap {
        overflow: hidden;
              .login-page-wrap .login-content {
        padding: 50px 15px 0;
              width: 100%;
              .login-page-wrap .login-form-wrap {
        padding-left: 0;
              .login-page-wrap .nav-tabs {
        position: inherit;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              .login-page-wrap .nav-tabs li {
        -webkit-writing-mode: inherit;
              -ms-writing-mode: inherit;
              writing-mode: inherit;
              -webkit-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              transform: rotate(0deg);
              margin-bottom: 0;
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              margin-right: 10px;
              .login-page-wrap .nav-tabs li .nav-link {
        padding: 12px 10px;
              border-radius: 6px 6px 0 0;
              font-size: 14px;
              .login-page-wrap .nav-tabs li .nav-link i {
        -webkit-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              transform: rotate(0deg);
              margin-bottom: 0;
              margin-right: 6px;
              font-size: 18px;
              .login-page-wrap .tab-content {
        border-radius: 0 0 15px 15px;
              min-width: 100%;
              padding: 30px 20px;
              .login-page-wrap .tab-content .item-title {
        font-size: 22px;
              .banner-user .media {
        display: block;
              text-align: center;
              .banner-user .media .item-img {
        margin-right: 0;
              margin-bottom: 30px;
              .forum-post-input .media {
        padding: 20px;
              .forum-media-gallery {
        display: block;
              .post-view .post-header .media .user-img {
        margin-right: 5px;
              -webkit-transform: scale(0.8);
              -ms-transform: scale(0.8);
              transform: scale(0.8);
              .post-view .post-header .media .user-title i {
        font-size: 15px;
              height: 16px;
              width: 16px;
              line-height: 16px;
              .post-view .post-header .dropdown-toggle {
        font-size: 30px;
              .post-view .post-header .dropdown-toggle: before {
        height: 30px;
              width: 30px;
              top: 9px;
              left: 2px;
              .post-view .post-footer > ul > li {
        margin-right: 20px;
              .post-view .post-footer > ul > li > a i {
        margin-right: 10px;
              font-size: 15px;
              .post-view .post-footer .post-react .react-list li {
        margin-right: 0;
              .post-view .post-footer .post-react .react-list li a img {
        border: 1px solid #ffffff;
              .single-product .product-content .action-area li {
        margin-right: 0;
              margin-bottom: 15px;
              .single-product-info .nav-tabs {
        margin-bottom: 10px;
              .single-product-info .nav-tabs .nav-item {
        margin-right: 15px;
              margin-bottom: 10px;
              .single-product-info .nav-tabs .nav-item .nav-link {
        font-size: 15px;
              .user-search-bar {
        display: block;
              padding: 15px;
              .user-search-bar .box-item {
        -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
              margin-right: 0;
              .user-search-bar .search-box {
        margin-bottom: 14px;
              .user-search-bar .search-filter {
        margin-right: 0;
              .user-video .video-btn .play-icon {
        height: 40px;
              width: 40px;
              line-height: 36px;
              font-size: 14px;
              .widget-memebers .nav-tabs .nav-item {
        margin-right: 5px;
              .widget-groups .nav-tabs .nav-item {
        margin-right: 5px;
            }
            479px) {
              .footer-wrap .footer-top-image {
        display: none;
              .header-action ul .header-search-icon {
        display: none;
              .fixed-header .header-control .dropdown .dropdown-toggle {
        font-size: 20px;
              .fixed-header .header-control .dropdown .dropdown-toggle .notify-count {
        height: 16px;
              width: 16px;
              line-height: 16px;
              font-size: 10px;
              .fixed-header .header-control .dropdown-admin .dropdown-toggle .item-img {
        margin-right: 5px;
              .banner-newsletter .newsletter-box .input-group .form-control {
        width: 100%;
              margin-bottom: 15px;
              .banner-newsletter .newsletter-box .input-group .input-group-append {
        -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
              .post-input-tab .post-footer {
        padding: 18px 20px;
              .post-input-tab .post-footer .insert-btn a {
        font-size: 20px;
              margin-right: 4px;
              .post-input-tab .post-footer .submit-btn a {
        padding: 7px 15px;
              .post-view .post-header .media .entry-meta li i {
        margin-right: 4px;
              .post-view .post-header .media .entry-meta li: after {
        padding: 0 2px 0 5px;
              .post-view .post-body .post-meta-wrap .post-meta .meta-text {
        margin-left: 5px;
              font-size: 13px;
              .post-view .post-body .post-meta-wrap .post-meta .meta-text + .meta-text: before {
        padding: 0 10px 0 2px;
              .post-view .post-body .post-meta-wrap .post-reaction img {
        -webkit-transform: scale(0.8);
              -ms-transform: scale(0.8);
              transform: scale(0.8);
              margin-right: -18px;
              .post-view .post-footer > ul {
        display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
              .post-view .post-footer .post-share .share-list {
        right: 0;
              left: auto;
              .single-product-info .tab-content .product-review .media {
        display: block;
              .single-product-info .tab-content .product-review .media .item-img {
        margin-right: 0;
              margin-top: 0;
              margin-bottom: 15px;
              .newsfeed-search .active-member a {
        font-size: 14px;
              .newsfeed-search .active-member a .member-icon {
        display: none;
              .newsfeed-search .search-list li .drop-btn {
        padding: 15px;
              font-size: 18px;
              .newsfeed-search .search-list li .drop-menu {
        right: -50px;
              .user-timeline-header .header-dropdown {
        -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
              margin-bottom: 10px;
              .user-about .user-info li {
        display: block;
            }
            767px) {
              .footer-wrap .footer-top-image li: nth-child(4n) {
        display: none;
              .footer-wrap .footer-top-image li: nth-child(5n) {
        display: none;
              .footer-dashboard {
        margin-top: 40px;
              .fixed-header .header-control .inline-item {
        margin-right: 25px;
              .fixed-sidebar .sidebar-menu-wrap .side-menu li {
        margin-bottom: 5px;
              .mobile-nav-item {
        margin-right: 10px;
              .about-us .about-us-content .media .item-icon {
        font-size: 30px;
              .about-us .about-us-content .media .item-title {
        font-size: 30px;
              .about-us .about-us-img .item-img: after {
        display: none;
              .banner-newsletter .newsletter-box p {
        width: 100%;
              .community-network .bg-shape {
        display: none;
              .contact-page .contact-box-wrap .contact-form {
        padding: 30px;
              .contact-page .contact-box-wrap .contact-method li {
        font-size: 16px;
              .testimonial-carousel: before {
        display: none;
              .newsfeed-banner {
        padding: 30px;
              .forum-media-gallery .media-upload {
        margin-right: 30px;
              .forum-media-gallery .media-upload .item-title {
        font-size: 20px;
              .post-input-tab .nav-tabs .nav-link {
        font-size: 12px;
              .post-input-tab .nav-tabs .nav-link i {
        font-size: 16px;
              .post-view .post-header {
        padding: 20px 15px 18px;
              .post-view .post-header .media .user-title {
        font-size: 15px;
              .post-view .post-body {
        padding: 0 15px;
              .post-view .post-footer {
        padding: 3px 15px;
              .post-view .post-comment .comment-list {
        padding: 0 20px 0;
              .post-view .post-comment .post-footer .react-icon img {
        margin-right: -18px;
              -webkit-transform: scale(0.8);
              -ms-transform: scale(0.8);
              transform: scale(0.8);
              .post-view .post-comment .comment-reply {
        padding: 10px 20px;
              .post-view .post-comment .children {
        padding-left: 15px;
              .load-more-btn .item-btn {
        padding: 20px 10px;
              font-size: 15px;
              .load-more-btn .item-btn i {
        font-size: 16px;
              .product-filter .select-box {
        display: block;
              .single-product-info {
        padding: 30px 15px;
              .user-top-header .menu-list li {
        -webkit-box-flex: 0;
              -webkit-flex: 0 0 25%;
              -ms-flex: 0 0 25%;
              flex: 0 0 25%;
              max-width: 25%;
              display: none;
              .user-top-header .menu-list .dropdown {
        margin-left: 15px;
              .user-timeline-header {
        padding: 15px 30px;
              .user-about .user-info li label {
        min-width: 140px;
              .user-list-view .widget-author .author-heading {
        -webkit-box-align: start;
              -webkit-align-items: flex-start;
              -ms-flex-align: start;
              align-items: flex-start;
              .user-list-view .widget-author .author-badge {
        text-align: left;
              margin-top: -40px;
              padding-left: 116px;
              .user-list-view .widget-author .author-statistics {
        text-align: left;
              padding-left: 116px;
              .user-list-view .user-group .member-thumb {
        text-align: left;
              padding-left: 133px;
              margin-top: -40px;
              margin-bottom: 15px;
              .load-more-post {
        margin-top: 40px;
              margin-bottom: 60px;
              .user-single-blog .blog-content blockquote {
        margin: 20px 15px;
              .user-single-blog .blog-content blockquote p {
        font-size: 16px;
            }
            991px) {
              .footer-wrap .footer-top-image li: nth-child(6n) {
        display: none;
              .footer-wrap .footer-top-image li: nth-child(7n) {
        display: none;
              .main-footer {
        background-color: #ffffff;
              padding: 80px 0 25px;
              .temp-logo {
        display: none;
              .fixed-header .header-menu {
        padding: 0 60px !important;
              .fixed-header .header-menu .header-logo {
        margin-bottom: 0;
              .fixed-header .header-menu .header-logo: before {
        height: 6px;
              width: 6px;
              top: 1px;
              left: 31px;
              .fixed-header .header-control .dropdown .dropdown-menu {
        top: 43px;
              .fixed-header .header-control .dropdown-admin .dropdown-menu {
        top: 51px;
              .fixed-sidebar .fixed-sidebar-left.large-sidebar {
        width: 230px;
              .fixed-sidebar .sidebar-toggle {
        height: 60px;
              .fixed-sidebar .sidebar-toggle .toggle-btn {
        width: 25px;
              .fixed-sidebar .sidebar-toggle .toggle-btn span {
        height: 3px;
              width: 15px;
              margin-bottom: 6px;
              .fixed-sidebar .sidebar-toggle .toggle-btn span: before {
        height: 3px;
              width: 6px;
              left: -10px;
              .fixed-sidebar .sidebar-toggle .toggle-btn span: nth-child(even):before {
        right: -10px;
              .fixed-sidebar.right .fixed-sidebar-right.small-sidebar {
        width: 60px;
              .fixed-sidebar.right .sidebar-toggle .chat-icon {
        font-size: 25px;
              .fixed-sidebar.right .user-chat-list .chat-item {
        margin-bottom: 15px;
              .fixed-sidebar.right .user-chat-list .chat-item .author-img {
        -webkit-transform: scale(0.8);
              -ms-transform: scale(0.8);
              transform: scale(0.8);
              .chat-conversion-box .modal-dialog {
        margin: 10px 60px 0 0;
              .section .section-heading p {
        width: 100%;
              .section .flex-heading {
        text-align: center;
              .section .flex-heading p {
        width: 100%;
              .about-us .about-us-content > .item-title {
        width: 100%;
              .about-us .about-us-content p {
        width: 100%;
              .about-us .about-us-img .item-video {
        bottom: 40px;
              .hero-banner .hero-content p {
        width: 70%;
              .banner-apps {
        padding-top: 70px;
              text-align: center;
              .banner-apps: before {
        display: none;
              .banner-apps .banner-content p {
        width: 100%;
              .banner-apps .banner-img {
        padding-top: 80px;
              .banner-apps .banner-img: before {
        display: none;
              .blog-grid .blog-box .blog-content .blog-title {
        font-size: 20px;
              .community-network .community-content p {
        margin-bottom: 0;
              .community-network .map-marker {
        display: none;
              .contact-page .map-area .google-map {
        height: 450px;
              .contact-page .contact-box-wrap .contact-method {
        padding-left: 0;
              .team-circle .nav-tabs {
        -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
              .team-circle .nav-tabs .nav-item {
        -webkit-transform: scale(1) !important;
              -ms-transform: scale(1) !important;
              transform: scale(1) !important;
              position: initial;
              margin-right: 15px;
              .team-circle .nav-tabs .nav-link img {
        height: 100px;
              width: 100px;
              .team-circle .tab-content {
        padding: 50px 0;
              .why-choose-fluid .why-choose-img .image-box img {
        height: auto;
              .why-choose-us .why-choose-box .features-list li: nth-child(even) {
        padding-left: 0;
              .newsfeed-banner .item-icon {
        font-size: 70px;
              .newsfeed-banner .animation-img li: nth-child(2n) {
        display: none;
              .banner-user {
        padding: 100px 35px 35px 50px;
              .banner-user .media .user-meta {
        position: relative;
              margin-top: 20px;
              .forum-last-status .widget-heading .widget-title {
        font-size: 20px;
              .forum-topic-add .heading-title {
        font-size: 20px;
              .user-list-view.forum-member .widget-author {
        padding: 20px;
              .user-list-view.forum-member .widget-author .profile-img {
        margin-right: 15px;
              .post-view .post-body .post-img-list li: last-child a:after {
        font-size: 32px;
              .post-view .post-body .post-video .video-btn {
        height: 60px;
              width: 60px;
              line-height: 55px;
              font-size: 22px;
              border-width: 3px;
              .product-filter {
        display: block;
              .product-filter .select-box .select2 {
        margin-bottom: 10px;
              .single-product .product-gallery {
        margin-bottom: 30px;
              .single-product-info .tab-content .additional-info li {
        font-size: 15px;
              .single-product-info .tab-content .product-review .media .media-body p {
        width: 100%;
              .user-list-view .widget-author {
        padding: 20px;
              .user-list-view .widget-author .profile-img {
        margin-right: 15px;
              .user-list-view .widget-author .cover-img {
        display: none;
              .user-single-blog .blog-entry-header .entry-meta {
        margin-bottom: 20px;
              .user-single-blog .blog-entry-header .blog-share {
        text-align: left;
              .user-single-blog .blog-content .item-title {
        font-size: 28px;
              .user-single-blog .blog-comment-form .item-title {
        font-size: 28px;
              .widget-break-lg {
        margin-top: 50px;
              .widget-banner: after {
        display: none;
              .widget-gallery .photo-list li {
        -webkit-box-flex: 0;
              -webkit-flex: 0 0 25%;
              -ms-flex: 0 0 25%;
              flex: 0 0 25%;
              max-width: 25%;
            }
            1440px) {
              .menu-layout1 {
        padding: 0;
              .hero-banner .map-line {
        left: 0;
              .hero-banner .leftside-image .cartoon-image {
        right: 0;
              .hero-banner .leftside-image .shape-image {
        right: 0;
            }
            1439px) {
              .fixed-header .navbar {
        padding: 0 25px;
            }
            374px) {
              .fixed-header .header-control .inline-item: after {
        display: none;
              .fixed-header .header-control .dropdown {
        margin-right: 0;
            }
            1360px) {
              .fixed-header .header-control .input-group {
        width: 200px;
              .fixed-header .header-control .dropdown-admin .dropdown-toggle {
        padding-right: 0;
              .fixed-header .header-control .dropdown-admin .dropdown-toggle: before {
        display: none;
              .fixed-header .header-control .dropdown-admin .dropdown-toggle .media .media-body {
        display: none;
              .fixed-sidebar .fixed-sidebar-left.small-sidebar {
        height: 0;
              .fixed-sidebar.right .fixed-sidebar-right {
        height: 0;
              .fixed-sidebar.right .sidebar-menu-wrap {
        -webkit-transform: translateX(120px);
              -ms-transform: translateX(120px);
              transform: translateX(120px);
              .fixed-sidebar.chat-head-hide .sidebar-menu-wrap {
        -webkit-transform: translateX(0);
              -ms-transform: translateX(0);
              transform: translateX(0);
              .page-content {
        padding: 160px 0 0;
            }
          }
        }
        (min-width {
          &: {
            1200px) {
              .container {
        max-width: 1200px;
              .fixed-sidebar .sidebar-menu-wrap .top-menu-mobile {
        display: none;
            }
          }
        }
      }
    }
  }
}
} {
  @media {
    only {
      screen {
        and {
          (max-width {
            &: {
              991px) {
                h1 {
        font-size: 40px;
                h2 {
        font-size: 32px;
                h3 {
        font-size: 24px;
                .breadcrumbs-banner .breadcrumb-animate-img {
        right: -20%;
                bottom: -25%;
                .footer-dashboard .main-footer {
        padding-top: 80px;
                .hide-on-mobile-menu {
        display: none;
                .fixed-header .header-menu .header-logo img {
        height: 30px;
                .fixed-header .navbar {
        padding: 7px 10px;
                .fixed-header .header-control .input-group {
        width: 170px;
                .fixed-header .header-control .dropdown-admin .dropdown-toggle {
        -webkit-transform: scale(0.8);
                -ms-transform: scale(0.8);
                transform: scale(0.8);
                .fixed-sidebar .fixed-sidebar-left.small-sidebar {
        width: 60px;
                .section {
        padding: 72px 0 60px;
                .page-content {
        padding: 100px 0 0;
                .about-us {
        padding: 75px 0 80px;
                .about-us .about-us-content {
        margin-bottom: 50px;
                .hero-banner {
        padding: 160px 0 80px;
                min-height: auto;
                .hero-banner .hero-content .item-number {
        font-size: 34px;
                .banner-newsletter {
        padding: 75px 0 180px;
                .banner-apps .banner-content .item-title {
        font-size: 32px;
                .community-network {
        padding: 75px 0;
                background-image: none;
                .contact-page .contact-box-wrap .contact-box {
        margin-bottom: 50px;
                .testimonial-carousel {
        padding: 75px 0 60px;
                .why-choose-fluid .why-choose-content {
        padding: 80px calc((100% - 690px) / 2);
                .why-choose-us {
        padding: 80px 0 30px;
                .why-choose-us .why-choose-box .features-list: before {
        display: none;
                .product-breadcrumb {
        padding: 80px 0;
                .user-list-view .widget-author .profile-img a: before {
        display: none;
                .user-list-view .widget-author .author-statistics li a {
        padding: 0 10px 0 5px;
              }
              767px) {
                h1 {
        font-size: 34px;
                h2 {
        font-size: 30px;
                h3 {
        font-size: 22px;
                .fixed-header .header-menu {
        padding: 0 50px !important;
                .fixed-header .navbar {
        padding: 2px 10px;
                .fixed-header .header-control .dropdown .dropdown-menu {
        top: 38px;
                min-width: 280px;
                .fixed-header .header-control .dropdown-admin .dropdown-toggle {
        -webkit-transform: scale(0.7);
                -ms-transform: scale(0.7);
                transform: scale(0.7);
                .fixed-header .header-control .dropdown-admin .dropdown-menu {
        top: 45px;
                .fixed-sidebar .fixed-sidebar-left.small-sidebar {
        width: 50px;
                .fixed-sidebar .sidebar-toggle {
        height: 50px;
                .fixed-sidebar.right .fixed-sidebar-right.small-sidebar {
        width: 50px;
                .fixed-sidebar.right .user-chat-list .chat-item .author-img {
        -webkit-transform: scale(0.7);
                -ms-transform: scale(0.7);
                transform: scale(0.7);
                .chat-conversion-box .modal-dialog {
        margin: 10px 50px 0 0;
                .page-content {
        padding: 90px 0 0;
                .hero-banner {
        padding: 140px 0 60px;
                .hero-banner .hero-content .item-number {
        font-size: 30px;
                .banner-apps .banner-content .item-title {
        font-size: 28px;
                .team-circle .nav-tabs .nav-link img {
        height: 70px;
                width: 70px;
                .why-choose-fluid .why-choose-content {
        padding: 80px calc((100% - 510px) / 2);
                .newsfeed-banner .item-icon {
        font-size: 60px;
                .newsfeed-banner .media-body .item-title {
        font-size: 26px;
                .banner-user {
        padding: 60px 30px 35px;
                .banner-user {
        padding: 60px 20px 35px;
                .post-view .post-body .post-img-list li: last-child a:after {
        font-size: 28px;
                .product-breadcrumb {
        padding: 60px 0;
                .product-filter .select-box .select2 {
        margin-right: 0;
                .user-list-view .widget-author {
        display: block;
                .user-list-view .widget-author .author-badge li {
        margin-right: 0;
                margin-bottom: 15px;
                .user-list-view .widget-author .author-badge li a {
        text-align: center;
                .user-single-blog .blog-content-wrap {
        padding: 30px 15px;
                .user-single-blog .blog-entry-header .entry-meta {
        margin-bottom: 10px;
                .user-single-blog .blog-entry-header .entry-meta li {
        margin-bottom: 10px;
                .user-single-blog .blog-content .item-title {
        font-size: 26px;
                .user-single-blog .blog-comment-form .item-title {
        font-size: 26px;
              }
              575px) {
                h1 {
        font-size: 30px;
                h2 {
        font-size: 24px;
                .fixed-header .navbar {
        -webkit-box-pack: center;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
                .fixed-header .header-control .dropdown-friend .dropdown-menu: before {
        left: 82px;
                .fixed-header .header-control .dropdown-notification .dropdown-menu {
        left: -135px;
                .mobile-nav-item {
        margin-right: 40px;
                .mobile-nav-item .mobile-logo a {
        padding: 0 0 0 35px;
                .about-us .about-us-content .media .item-icon {
        font-size: 26px;
                .about-us .about-us-content .media .item-title {
        font-size: 24px;
                .about-us .about-us-img .item-img img {
        width: 100%;
                .about-us .about-us-img .item-video {
        display: none;
                .hero-banner .hero-content p {
        width: 100%;
                .banner-apps .banner-content .item-title {
        font-size: 26px;
                .contact-page .map-area .google-map {
        height: 400px;
                .contact-page .contact-box-wrap .contact-form {
        padding: 30px 15px;
                .team-circle .nav-tabs .nav-item {
        margin-bottom: 15px;
                .team-circle .tab-content {
        padding: 30px 0 50px;
                .why-choose-fluid .why-choose-content {
        padding: 80px 15px;
                .newsfeed-banner {
        text-align: center;
                padding: 20px;
                .newsfeed-banner .item-icon {
        display: none;
                .newsfeed-banner .media-body .item-title {
        font-size: 24px;
                .forum-media-gallery .media-upload {
        margin-right: 0;
                margin-bottom: 20px;
                .post-input-tab .nav-tabs .nav-link {
        font-size: 0;
                .post-view .post-header .media .user-title {
        font-size: 14px;
                .post-view .post-body .post-img-list li: last-child a:after {
        font-size: 24px;
                .post-view .post-body .post-video .video-btn {
        height: 50px;
                width: 50px;
                line-height: 45px;
                font-size: 18px;
                border-width: 3px;
                .load-more-btn .item-btn {
        padding: 15px 10px;
                .single-product .product-content .action-area {
        display: block;
                .user-single-blog .blog-content .item-title {
        font-size: 24px;
                .user-single-blog .blog-comment-form .item-title {
        font-size: 24px;
                .widget {
        padding: 25px 20px 35px;
              }
              1199px) {
                .breadcrumbs-banner {
        padding: 145px 0 55px;
                .fixed-header .navbar {
        padding: 19px 15px;
                .fixed-header .header-control .input-group {
        width: 250px;
                .hero-banner .map-line {
        left: auto;
                right: 0;
              }
              1360px) {
                .fixed-header .navbar {
        padding: 0 15px;
                .fixed-sidebar .fixed-sidebar-left.small-sidebar .sidebar-menu-wrap {
        display: none;
                .fixed-sidebar.chat-head-hide .fixed-sidebar-right {
        height: 100%;
              }
              479px) {
                .fixed-header .navbar {
        padding: 2px 5px;
                .chat-conversion-box .modal-dialog {
        max-width: 250px;
                .mobile-nav-item {
        margin-right: 20px;
                .banner-newsletter {
        padding: 75px 0 80px;
                .banner-newsletter .newsletter-box .input-group {
        display: block;
                background-color: transparent;
                .user-list-view.forum-member .widget-author .profile-img {
        margin-right: 10px;
                .post-view .post-body .post-img-list li: last-child a:after {
        font-size: 20px;
                .post-view .post-footer > ul > li {
        margin-right: 10px;
                .user-timeline-header {
        display: block;
                .user-about .user-info li label {
        min-width: auto;
                margin-right: 0;
                font-weight: 700;
                color: #000000;
                .user-list-view .widget-author .profile-img {
        margin-right: 10px;
                .user-list-view .widget-author .author-badge {
        padding-left: 105px;
                .user-list-view .widget-author .author-badge li {
        -webkit-transform: scale(0.7);
                -ms-transform: scale(0.7);
                transform: scale(0.7);
                margin-bottom: 0;
                .user-list-view .widget-author .author-statistics {
        padding-left: 113px;
                .user-list-view .widget-author .author-statistics li {
        margin-top: 15px;
                .user-list-view .widget-author .author-statistics li a {
        padding: 0 4px 0 0;
                font-size: 12px;
                .user-list-view .user-group .author-statistics li {
        display: block;
                .widget-gallery .photo-list li {
        -webkit-box-flex: 0;
                -webkit-flex: 0 0 33.333333%;
                -ms-flex: 0 0 33.333333%;
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
              }
              374px) {
                .fixed-header .header-control .inline-item {
        margin-right: 10px;
              }
              1366px) {
                .hero-banner .leftside-image .cartoon-image {
        right: -10%;
                bottom: 20px;
                .hero-banner .leftside-image .shape-image {
        right: -14%;
                top: 80px;
              }
            }
          }
          (min-width {
            &: {
              992px) {
                .hide-on-desktop-menu {
        display: none !important;
              }
            }
          }
        }
      }
    }
  }
  h2 {
    font-size: 36px;
    line-height: 42px;
  }
  h3 {
    font-size: 28px;
  }
  h4 {
    font-size: 22px;
  }
  h5 {
    font-size: 18px;
  }
  .container-fluid {
    &.full-width {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .breadcrumbs-banner {
    .breadcrumb-animate-img {
      position: absolute;
      right: 9%;
      bottom: 0;
      line-height: 0;
      z-index: -1;
    }
    .breadcrumbs-area {
      position: relative;
      z-index: 1;
    }
  }
  .footer-wrap {
    .footer-top-image {
      li {
        display: inline-block;
        position: absolute;
        top: -103px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: -2;
        &:nth-child(5n) {
          left: calc(50% - 270px);
          top: -88px;
        }
        &:nth-child(6n) {
          left: calc(50% + 405px);
          top: -80px;
        }
        &:nth-child(7n) {
          left: calc(50% - 405px);
          top: -69px;
        }
        &:nth-child(8n) {
          left: calc(50% + 540px);
          top: -60px;
        }
        &:nth-child(9n) {
          left: calc(50% - 540px);
          top: -44px;
        }
      }
    }
  }
  .main-footer {
    padding: 140px 0 25px;
  }
  .footer-box {
    margin-bottom: 50px;
  }
  .footer-dashboard {
    &:before {
      display: none;
    }
  }
  /*------------------- 4.4 Global -------------------*/
  @keyframes {
    moveclouds {
      0% {
        margin-left: 1000px;
    }
    movingleftright1 {
      0% {
        -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
    movingleftright2 {
      0% {
        -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
    movingleftright3 {
      0% {
        -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
    pulse {
      0% {
        box-shadow: 0 0 0 0 #0c1fd7;
    }
    movinground {
      0% {
        -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }
    pulse2 {
      0% {
        box-shadow: 0 0 0 0 #5edfff;
    }
  }
  @-webkit-keyframes {
    movingleftright1 {
      0% {
        -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
    movingleftright2 {
      0% {
        -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
    movingleftright3 {
      0% {
        -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
    }
    pulse {
      0% {
        box-shadow: 0 0 0 0 #0c1fd7;
    }
    movinground {
      0% {
        -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
    }
    pulse2 {
      0% {
        box-shadow: 0 0 0 0 #5edfff;
    }
  }
  /*------------------- 4.6 Header Menu -------------------*/
  .temp-logo {
    &:before {
      content: "";
      height: 9px;
      width: 9px;
      background-color: #5edfff;
      position: absolute;
      top: 1px;
      left: 44px;
      border-radius: 50%;
      -webkit-animation: pulse2 linear 1000ms infinite;
      animation: pulse2 linear 1000ms infinite;
    }
  }
  nav {
    &.template-main-menu {
      & > ul {
        & > li {
          & > a {
            &:hover {
              color: #5edfff;
            }
          }
        }
      }
    }
  }
  .rt-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    left: 0;
    right: 0;
    background-color: #615dfa;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
    -webkit-animation: upsdown 1000ms;
    animation: upsdown 1000ms;
  }
  .header-action {
    ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      .header-social {
        &:after {
          content: "";
          height: 24px;
          width: 1px;
          background-color: rgba(255, 255, 255, 0.4);
          position: absolute;
          top: 50%;
          right: -22px;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
      .header-search-icon {
        a {
          color: #ffffff;
          font-size: 20px;
        }
      }
      .login-btn {
        a {
          &:hover {
            background-color: #5edfff;
            color: #ffffff;
          }
        }
      }
    }
  }
  .header-search {
    .header-search-form {
      .search-btn {
        padding: 24px 10px;
        background-color: transparent;
        box-shadow: none;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .fixed-header {
    .header-menu {
      .header-logo {
        position: relative;
        margin-bottom: 8px;
        &:before {
          content: "";
          height: 9px;
          width: 9px;
          background-color: #5edfff;
          position: absolute;
          top: 1px;
          left: 44px;
          border-radius: 50%;
          -webkit-animation: pulse2 linear 1000ms infinite;
          animation: pulse2 linear 1000ms infinite;
        }
      }
    }
    .navbar {
      padding: 0 40px;
      .nav-top-menu {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-left: 30px;
      }
    }
    nav {
      &.template-main-menu {
        ul {
          li {
            a {
              padding: 37px 15px;
            }
          }
        }
      }
    }
    .header-control {
      .inline-item {
        &:after {
          content: "";
          height: 21px;
          width: 2px;
          background-color: #9996fc;
          position: absolute;
          top: 50%;
          right: -20px;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        &:last-child {
          margin-right: 0;
        }
      }
      .input-group {
        .form-control {
          padding: 5px 20px;
          height: 42px;
          color: #ffffff;
          font-size: 14px;
          background-color: transparent;
        }
      }
      .dropdown {
        &:last-child {
          margin-right: 0;
        }
        .dropdown-toggle {
          .notify-count {
            display: block;
            height: 18px;
            width: 18px;
            line-height: 18px;
            background-color: #f57f17;
            border-radius: 50%;
            color: #ffffff;
            font-size: 12px;
            position: absolute;
            top: -4px;
            right: -6px;
            box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
          }
          &:after {
            display: none;
          }
        }
        .dropdown-menu {
          &:before {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 10px solid #ffffff;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            position: absolute;
            top: -10px;
            right: 40px;
          }
          .item-heading {
            padding: 15px 22px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            font-size: 14px;
          }
        }
      }
      .dropdown-friend {
        .dropdown-menu {
          .item-heading {
            padding-bottom: 4px;
          }
        }
      }
      .dropdown-cart {
        .dropdown-menu {
          .item-heading {
            padding-bottom: 4px;
          }
        }
      }
      .dropdown-admin {
        .dropdown-toggle {
          &:before {
            content: "...";
            font-size: 22px;
            color: #eff4fb;
            font-weight: 700;
            position: absolute;
            top: 4px;
            right: 0;
          }
          .media {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
          }
          .item-img {
            margin-right: 18px;
            position: relative;
            &:after {
              content: url("../../media/figure/chat_round_shape4.png");
              position: absolute;
              top: -5px;
              left: -5px;
            }
          }
        }
        .dropdown-menu {
          &:before {
            left: 70px;
          }
          .admin-options {
            padding: 15px 24px;
          }
        }
      }
    }
  }
  .fixed-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    .fixed-sidebar-left {
      &.large-sidebar {
        width: 270px;
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        .sidebar-toggle {
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
          justify-content: space-between;
          padding: 0 25px;
        }
      }
    }
    .sidebar-toggle {
      .toggle-btn {
        width: 33px;
        border: none;
        background-color: transparent;
        padding: 0;
        span {
          position: relative;
          display: block;
          height: 3px;
          width: 22px;
          background-color: #ffffff;
          border-radius: 2px;
          margin-bottom: 8px;
          margin-left: auto;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:last-child {
            margin-bottom: 0;
          }
          &:nth-child(even) {
            margin-left: 0;
          }
        }
        &:hover {
          span {
            background-color: #5edfff;
          }
        }
      }
    }
    .sidebar-menu-wrap {
      .side-menu {
        li {
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .top-menu-mobile {
        .menu-label {
          padding-left: 32px;
          color: #a8b1bc;
          margin: 20px 0 10px;
          font-weight: 700;
        }
      }
    }
    &.right {
      .fixed-sidebar-right {
        &.small-sidebar {
          width: 90px;
        }
      }
      .sidebar-toggle {
        background-color: #5edfff;
        cursor: pointer;
      }
      .user-chat-list {
        padding: 25px 0;
        .chat-item {
          &:last-child {
            margin-bottom: 0;
          }
          .author-img {
            &:before {
              content: url("../../media/figure/chat_round_shape2.png");
              position: absolute;
              top: -5px;
              left: -5px;
              z-index: 1;
              -webkit-transform: rotate(30deg);
              -ms-transform: rotate(30deg);
              transform: rotate(30deg);
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
              visibility: hidden;
              opacity: 0;
            }
          }
        }
      }
    }
    &.chat-head-hide {
      .sidebar-menu-wrap {
        -webkit-transform: translateX(120px);
        -ms-transform: translateX(120px);
        transform: translateX(120px);
      }
    }
  }
  .mCSB_scrollTools {
    .mCSB_draggerContainer {
      display: none;
    }
  }
  .chat-conversion-box {
    .modal-content {
      border: none;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    }
  }
  .mobile-toggler {
    display: none;
  }
  .section {
    .section-heading {
      text-align: center;
      margin-bottom: 40px;
    }
    .flex-heading {
      text-align: left;
      p {
        width: 80%;
        margin: 0;
      }
    }
  }
  .page-content {
    padding: 160px 90px 0;
  }
  .section-typography {
    padding: 120px 0;
  }
  .about-us {
    .about-us-content {
      & > .item-subtitle {
        color: #615dfa;
        margin-bottom: 12px;
        font-weight: 600;
      }
      p {
        width: 80%;
      }
      .progress-box {
        margin-top: 55px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .media {
        &:last-child {
          margin-right: 0;
        }
        .item-title {
          font-size: 36px;
          font-weight: 800;
          color: #000000;
          margin-bottom: 6px;
        }
        .item-subtitle {
          color: #71728c;
        }
      }
    }
    .about-us-img {
      .item-img {
        &:before {
          content: "";
          height: 100%;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
      .item-video {
        position: absolute;
        bottom: -20px;
        left: -10px;
        box-shadow: 0 6px 43px 0 rgba(16, 9, 30, 0.3);
        &:before {
          content: "";
          height: 100%;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
  .hero-banner {
    &:before {
      content: url("../../media/banner/hero_1.jpg");
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: -1;
    }
    .hero-content {
      .item-number {
        font-size: 40px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 6px;
      }
      .conn-people {
        font-size: 15px;
        color: #ffffff;
        margin-bottom: 38px;
      }
    }
    .map-line {
      .map-marker {
        li {
          position: absolute;
        }
      }
    }
    .leftside-image {
      .cartoon-image {
        position: absolute;
        bottom: 100px;
        right: 80px;
        z-index: 2;
      }
      .shape-image {
        position: absolute;
        top: 90px;
        right: 60px;
        z-index: 1;
      }
    }
  }
  .banner-newsletter {
    background-color: #f0f4f6;
    padding: 120px 0 190px;
    position: relative;
    .newsletter-box {
      text-align: center;
      .input-group {
        .form-control {
          height: 52px;
          border-radius: 30px;
          font-size: 14px;
        }
        .input-group-append {
          .button-slide {
            background-color: #5edfff;
            border: none;
            color: #ffffff;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
        }
      }
    }
    .section-shape {
      position: relative;
    }
  }
  .banner-apps {
    &:before {
      content: url("../../media/banner/shape_2.png");
      position: absolute;
      bottom: 0;
      left: -20px;
      line-height: 0;
    }
    .banner-content {
      .item-title {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 12px;
      }
      p {
        width: 90%;
        color: #71728c;
        margin-bottom: 22px;
      }
      .button-slide {
        background-color: #615dfa;
        color: #ffffff;
        border-color: #615dfa;
      }
    }
    .banner-img {
      &:before {
        content: url("../../media/banner/shape_3.png");
        position: absolute;
        top: 0;
        right: 30px;
        z-index: -1;
      }
      &:after {
        content: url("../../media/banner/shape_4.png");
        position: absolute;
        bottom: 70px;
        left: 10px;
        z-index: -1;
      }
    }
  }
  .blog-grid {
    .blog-box {
      .blog-content {
        .blog-title {
          a {
            color: #000000;
          }
        }
      }
    }
  }
  .community-network {
    .bg-shape {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
    .community-content {
      .item-title {
        width: 80%;
        margin-bottom: 20px;
        span {
          color: #615dfa;
        }
      }
    }
    .map-marker {
      position: relative;
      li {
        position: absolute;
      }
    }
  }
  .contact-page {
    .contact-box-wrap {
      background-color: #f0f4f6;
      .contact-box {
        .item-title {
          font-size: 24px;
          position: relative;
          padding-bottom: 20px;
          margin-bottom: 30px;
          &:before {
            content: "";
            height: 3px;
            width: 6px;
            background-color: #615dfa;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
      .contact-method {
        li {
          font-size: 18px;
          font-weight: 600;
          color: #000000;
          margin-bottom: 20px;
          i {
            color: #5edfff;
            margin-right: 14px;
          }
        }
      }
    }
  }
  .groups-popular {
    .groups-box {
      .item-content {
        position: absolute;
        top: 60%;
        left: 0;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 1;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
  }
  .team-circle {
    .nav-tabs {
      .nav-item {
        margin-bottom: 0;
        -webkit-transform: scale(0.55);
        -ms-transform: scale(0.55);
        transform: scale(0.55);
        position: absolute;
        &:nth-child(1n) {
          -webkit-transform: scale(0.75);
          -ms-transform: scale(0.75);
          transform: scale(0.75);
          top: -8%;
          right: -17%;
        }
      }
    }
    .nav-tabs-right {
      .nav-item {
        &:nth-child(1n) {
          -webkit-transform: scale(0.55);
          -ms-transform: scale(0.55);
          transform: scale(0.55);
          top: -14%;
          left: -30%;
          right: auto;
        }
      }
    }
    .tab-content {
      .tab-pane {
        text-align: center;
      }
    }
  }
  .testimonial-carousel {
    &:before {
      content: url("../../media/testimonial/shape_2.png");
      position: absolute;
      right: 18%;
      top: 0;
    }
    .testimonial-content {
      text-align: center;
      margin-bottom: 34px;
    }
  }
  .why-choose-fluid {
    .why-choose-content {
      &:before {
        content: url("../../media/figure/shape_6.png");
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: -1;
      }
    }
  }
  .why-choose-us {
    padding: 120px 0 70px;
    .why-choose-box {
      margin-bottom: 50px;
      .button-slide {
        .btn-text {
          margin-left: 20px;
        }
      }
      .features-list {
        li {
          margin-bottom: 35px;
        }
        .media {
          &:hover {
            .item-icon {
              background-color: #615dfa;
              color: #ffffff;
            }
          }
        }
        .media-body {
          .item-title {
            font-size: 22px;
            margin-bottom: 12px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
        }
      }
    }
  }
  .login-page-wrap {
    .content-wrap {
      height: 100%;
      background-image: url("../../media/banner/hero_1.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      overflow-y: auto;
      position: relative;
      z-index: 1;
      .map-line {
        position: absolute;
        bottom: 0;
        z-index: -1;
      }
    }
    .item-logo {
      margin-bottom: 50px;
      text-align: center;
    }
    .nav-tabs {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      display: block;
      border-bottom: none;
      li {
        margin-bottom: 10px;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        .nav-link {
          text-align: center;
          background-color: #ffffff;
          font-size: 16px;
          color: #000000;
          font-weight: 700;
          border: none;
          border-radius: 0 6px 6px 0;
          padding: 35px 12px;
          i {
            margin-bottom: 6px;
            display: inline-block;
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            font-size: 22px;
            color: #5edfff;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
          &:hover {
            background-color: #5edfff;
            color: #ffffff;
          }
        }
      }
    }
    .tab-content {
      .item-title {
        font-size: 24px;
        margin-bottom: 30px;
        position: relative;
        padding-bottom: 20px;
        span {
          display: block;
        }
      }
    }
  }
  .newsfeed-banner {
    .media {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .item-icon {
      &:before {
        content: "";
        height: 54px;
        width: 3px;
        background-color: #ffffff;
        border-radius: 2px;
        position: absolute;
        top: 46%;
        right: -35px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
    .media-body {
      p {
        margin-bottom: 0;
        color: #ffffff;
      }
    }
  }
  .banner-user {
    background-image: url("../../media/banner/banner_user.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    padding: 180px 35px 35px 50px;
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
    &:before {
      content: "";
      height: 100%;
      width: 100%;
      background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9), transparent);
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
      border-radius: 8px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
    .media {
      .media-body {
        position: relative;
      }
      .item-img {
        &:after {
          content: url("../../media/banner/round_shape1.png");
          position: absolute;
          top: -9px;
          left: -8px;
        }
      }
      .user-meta {
        li {
          display: inline-block;
          color: #d7d7d7;
          margin-right: 24px;
        }
      }
    }
  }
  .forum-post-input {
    .media {
      .item-img {
        margin-right: 15px;
        padding: 4px;
        position: relative;
      }
    }
  }
  .forum-last-status {
    .forum-topic-status {
      padding: 16px 25px;
    }
  }
  .forum-topic-add {
    .block-box {
      padding: 35px 30px 45px;
    }
  }
  .user-list-view {
    &.forum-member {
      .widget-author {
        .profile-img {
          margin-right: 25px;
        }
        .cover-img {
          left: -6%;
        }
      }
    }
    .widget-author {
      .author-heading {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
      .profile-img {
        margin-bottom: 0;
        margin-right: 30px;
      }
      .cover-img {
        top: 50%;
        right: auto;
        left: -4%;
        -webkit-transform: rotate(-90deg) translateY(-50%);
        -ms-transform: rotate(-90deg) translateY(-50%);
        transform: rotate(-90deg) translateY(-50%);
      }
      .profile-name {
        text-align: left;
      }
      .author-statistics {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: right;
      }
    }
    .user-group {
      .member-thumb {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-bottom: 0;
      }
    }
  }
  .forum-media-gallery {
    .media-upload {
      margin-right: 100px;
      .item-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 22px;
      }
      .upload-btn {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        font-weight: 700;
        color: #ffffff;
        background-color: #a9b5c7;
        padding: 11px 30px;
        border-radius: 6px;
      }
    }
  }
  .post-input-tab {
    .nav-tabs {
      .nav-link {
        i {
          font-size: 20px;
          margin-right: 12px;
        }
        &:after {
          content: "";
          height: 3px;
          width: 100%;
          background-color: #5edfff;
          position: absolute;
          left: 0;
          bottom: -1px;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
      }
    }
    .post-footer {
      .insert-btn {
        a {
          margin-right: 10px;
          color: #98a4b4;
          font-size: 24px;
          padding: 5px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .submit-btn {
        a {
          &:hover {
            background-color: #5edfff;
          }
        }
      }
    }
  }
  .post-view {
    .post-header {
      .media {
        .user-img {
          position: relative;
          margin-right: 14px;
          padding: 5px;
          &:after {
            content: url("../../media/figure/chat_round_shape.png");
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .user-title {
          a {
            color: #111111;
            font-weight: 700;
          }
          .badge {
            font-size: 12px;
            color: #ffffff;
            font-weight: 400;
            background-color: #615dfa;
            border-radius: 20px;
            padding: 4px 10px;
          }
        }
        .entry-meta {
          li {
            &:after {
              content: ".";
              color: #a5a6b5;
              font-size: 20px;
              padding: 0 2px 0 6px;
              font-weight: 700;
            }
          }
        }
      }
      .dropdown {
        line-height: 1;
        margin-left: 10px;
      }
      .dropdown-toggle {
        &:before {
          content: "";
          height: 40px;
          width: 40px;
          background-color: #5edfff;
          border-radius: 50%;
          position: absolute;
          top: 7px;
          left: -2px;
          z-index: -1;
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
        &:after {
          display: none;
        }
      }
    }
    .post-body {
      p {
        font-size: 14px;
        color: #71728c;
        margin-bottom: 20px;
      }
      .post-meta-wrap {
        .post-meta {
          .meta-text {
            &:first-child {
              margin-left: 0;
            }
          }
        }
        .post-reaction {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          margin-top: 2px;
          img {
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      .post-video {
        position: relative;
        text-align: center;
        .video-btn {
          i {
            margin-left: 5px;
          }
        }
      }
    }
    .post-footer {
      & > ul {
        position: relative;
        & > li {
          display: inline-block;
          margin-right: 55px;
          &:last-child {
            margin-right: 0;
          }
          & > a {
            &:hover {
              color: #5edfff;
            }
          }
        }
      }
      .post-react {
        .react-list {
          li {
            &:last-child {
              margin-right: 0;
            }
            a {
              &:hover {
                img {
                  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
                }
              }
            }
          }
        }
      }
      .post-share {
        .share-list {
          li {
            display: inline-block;
            opacity: 0;
            -webkit-transform: translateX(-10px);
            -ms-transform: translateX(-10px);
            transform: translateX(-10px);
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
        }
      }
    }
    .post-comment {
      .main-comments {
        border-bottom: 1px solid #e6e9ec;
      }
      .load-more-btn {
        border-bottom: 1px solid #e6e9ec;
      }
      .comment-reply {
        .user-img {
          border-radius: 50%;
          padding: 5px;
          position: relative;
          margin-right: 15px;
        }
      }
    }
  }
  .load-more-btn {
    .item-btn {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      text-align: center;
      font-weight: 700;
      color: #000000;
      padding: 22px 10px;
      border-radius: 8px;
      i {
        font-size: 18px;
        margin-right: 10px;
        color: #615dfa;
        font-weight: 700;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      }
      &:hover {
        background-color: #5edfff;
        color: #ffffff;
      }
    }
  }
  .product-breadcrumb {
    .breadcrumb-area {
      position: relative;
      z-index: 1;
      text-align: center;
    }
  }
  .product-filter {
    label {
      margin-bottom: 0;
      margin-right: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #000000;
    }
    .select-box {
      .select2 {
        margin-right: 20px;
        min-width: auto !important;
      }
    }
    .filter-btn {
      .item-btn {
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
        background-color: #615dfa;
        border-radius: 4px;
        padding: 6px 60px;
      }
    }
  }
  .single-product {
    .product-gallery {
      .tab-content {
        position: relative;
        border: none;
        overflow: hidden;
      }
    }
    .product-content {
      .action-area {
        li {
          margin-right: 5px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .single-product-info {
    .nav-tabs {
      border-bottom: none;
      margin-bottom: 25px;
      .nav-item {
        margin-right: 40px;
        .nav-link {
          position: relative;
          display: inline-block;
          font-size: 18px;
          font-weight: 700;
          color: #a4a4a4;
          padding: 0 0 14px;
          border: none;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:after {
            content: "";
            height: 3px;
            width: 100%;
            background-color: #615dfa;
            border-radius: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
        }
      }
    }
    .tab-content {
      .additional-info {
        li {
          &:before {
            content: "\eed8";
            font-family: IcoFont;
            color: #615dfa;
            font-size: 20px;
            padding-right: 10px;
          }
        }
      }
      .product-review {
        .media {
          &:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
          }
          .item-img {
            img {
              border-radius: 50%;
            }
          }
        }
      }
      .review-form {
        .heading-title {
          font-size: 20px;
          margin-bottom: 20px;
        }
      }
    }
  }
  .newsfeed-search {
    .active-member {
      a {
        .member-icon {
          font-size: 18px;
          color: #615dfa;
          height: 40px;
          width: 40px;
          background-color: #eff4fb;
          border-radius: 50%;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          margin-right: 10px;
        }
        .member-text {
          color: #646464;
          font-weight: 600;
        }
      }
    }
    .search-list {
      li {
        .drop-btn {
          &:after {
            display: none;
          }
        }
        .drop-menu {
          &.show {
            top: 98%;
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
  }
  .user-search-bar {
    .box-item {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: 30px;
      &:last-child {
        margin-right: 0;
      }
    }
    .search-filter {
      margin-right: 14px;
    }
    .input-group {
      border-radius: 5px;
    }
  }
  .user-top-header {
    .menu-list {
      li {
        &:after {
          content: "";
          height: 5px;
          width: 100%;
          background-color: #615dfa;
          position: absolute;
          left: 0;
          right: 0;
          bottom: -2px;
          visibility: hidden;
          opacity: 0;
        }
        a {
          &:hover {
            color: #000000;
          }
        }
      }
      .dropdown {
        .dropdown-toggle {
          height: 100%;
          margin-top: -8px;
          background-color: transparent;
          border: none;
          font-size: 34px;
          color: #bbc5d3;
          position: relative;
          z-index: 1;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:after {
            display: none;
          }
        }
      }
    }
  }
  .user-timeline-header {
    .menu-list {
      li {
        display: inline-block;
        margin-right: 30px;
        a {
          font-weight: 700;
          color: #98a4b4;
          position: relative;
          padding: 21px 0;
          &:before {
            content: "";
            height: 4px;
            width: 100%;
            background-color: #5edfff;
            position: absolute;
            left: 0;
            bottom: 0;
            visibility: hidden;
            opacity: 0;
          }
        }
      }
    }
    .header-dropdown {
      label {
        margin-bottom: 0;
        margin-right: 12px;
        font-weight: 700;
        color: #98a4b4;
      }
      .dropdown-toggle {
        background-color: transparent;
        border: none;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        font-weight: 700;
        padding: 0;
        &:after {
          content: "\ea99";
          font-family: IcoFont;
          margin-top: 2px;
          margin-left: 8px;
          border: none;
          font-weight: 500;
        }
      }
    }
  }
  .user-about {
    .user-info {
      li {
        &:last-child {
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0;
        }
        a {
          color: #5edfff;
        }
      }
    }
  }
  .user-group {
    .profile-img {
      a {
        &:after {
          display: none;
        }
      }
    }
  }
  .user-video {
    .video-btn {
      .play-icon {
        i {
          margin-left: 2px;
        }
      }
    }
  }
  .load-more-post {
    .item-btn {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      text-align: center;
      font-weight: 700;
      color: #000000;
      background-color: #ffffff;
      padding: 15px 38px;
      border-radius: 6px;
    }
  }
  .user-single-blog {
    .blog-entry-header {
      border-bottom: 1px solid #e9edf1;
      padding-bottom: 20px;
      margin-bottom: 22px;
      .entry-meta {
        li {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          margin-right: 25px;
          font-size: 14px;
          font-weight: 600;
          color: #8c8c8c;
          img {
            border-radius: 50%;
            margin-right: 12px;
          }
        }
      }
      .blog-share {
        li {
          display: inline-block;
          margin-right: 2px;
        }
      }
    }
    .blog-content {
      blockquote {
        &:before {
          content: "";
          height: 100%;
          width: 4px;
          background-color: #5edfff;
          border-radius: 2px;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
        }
      }
      .content-img {
        margin-bottom: 5px;
        margin-top: 25px;
      }
    }
    .blog-footer {
      margin-bottom: 60px;
      text-align: center;
      border-top: 1px solid #e9edf1;
      border-bottom: 1px solid #e9edf1;
      padding: 28px 0 35px;
    }
    .blog-comment-form {
      .form-control {
        border-color: #d7d7d7;
      }
    }
  }
  .widget {
    &:last-child {
      margin-bottom: 0 !important;
    }
  }
  .widget-heading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .widget-memebers {
    .nav-tabs {
      .nav-item {
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .widget-groups {
    .nav-tabs {
      .nav-item {
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .widget-banner {
    .item-title {
      font-size: 26px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }
  }
  .widget-gallery {
    .photo-list {
      li {
        &:last-child {
          a {
            &:before {
              content: "";
              height: 100%;
              width: 100%;
              background-color: rgba(97, 93, 250, 0.9);
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 1;
            }
          }
        }
      }
    }
  }
}
h6 {
  font-size: 14px;
}
/*=======================================================================
2. Bootstrap Overwrite
=========================================================================*/
/*------------------- 2.1 Form -------------------*/
.form-group {
  position: relative;
  margin-bottom: 20px;
  .form-control {
    color: #111111;
    padding: 20px;
    border-color: #d7d7d7;
    background-color: #ffffff;
    border-radius: 4px;
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
  input {
    height: 50px;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .submit-btn {
    height: auto;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
    padding: 8px 25px;
    background-color: #615dfa;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:hover {
      background-color: #5edfff;
    }
    &:focus {
      outline: none;
    }
  }
}
.form-group input.form-control::-webkit-input-placeholder,
  .form-group textarea.form-control::-webkit-input-placeholder {
  color: #646464;
}
.input-group {
  border-radius: 30px;
  background-color: #ffffff;
  border: none;
  .form-control {
    border-radius: 4px 0 0 4px;
    padding: 0 20px;
    height: 40px;
    font-size: 12px;
    color: #111111;
    border: none;
    &:focus {
      box-shadow: none;
    }
  }
  .input-group-append {
    .search-btn {
      border: none;
      background-color: #615dfa;
      color: #ffffff;
      padding: 5px 15px;
      border-radius: 0 4px 4px 0;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      &:focus {
        outline: none;
      }
      &:hover {
        background-color: #5edfff;
      }
    }
  }
}
.input-group input.form-control::-webkit-input-placeholder,
  .input-group textarea.form-control::-webkit-input-placeholder {
  color: #969696;
}
.form-check {
  position: relative;
  padding-left: 0;
  label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    color: #646464;
    cursor: pointer;
    i {
      color: #ffbc09;
      margin-right: 4px;
    }
    &:before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 18px;
      height: 18px;
      left: 0;
      top: 5px;
      background-color: transparent;
      border: 2px solid #b1b0b0;
      border-radius: 2px;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }
    &:after {
      content: "";
      display: inline-block;
      position: absolute;
      left: 2px;
      top: 0;
      font-size: 16px;
    }
    &::before {
      border-radius: 4px;
    }
  }
  input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 4px;
    left: 20px;
    z-index: 1;
    opacity: 0;
    margin-top: 0;
  }
  input[type="checkbox"]:checked {
    & + label {
      color: #000000;
      &:after {
        font-family: IcoFont;
        content: "\eed8";
        font-weight: 600;
        color: #ffffff;
      }
      &:before {
        background-color: #615dfa;
        border-color: #615dfa;
      }
    }
  }
  input[type="checkbox"]:disabled {
    & + label {
      opacity: 0.65;
      &:before {
        background-color: #eeeeee;
        cursor: not-allowed;
      }
    }
  }
}
/*------------------- 2.2 Grid -------------------*/
.container-fluid {
  &.full-width {
    & > .row {
      margin-left: 0;
      margin-right: 0;
    }
  }
}
.container-fluid.full-width > .row > [class^="col-"],
    .container-fluid.full-width > .row > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
.row {
  &.gutters-10 {
    padding-left: 10px;
    padding-right: 10px;
    & > [class^="col-"] {
      padding-left: 5px;
      padding-right: 5px;
    }
  }
  &.gutters-15 {
    padding-left: 7.5px;
    padding-right: 7.5px;
    & > [class^="col-"] {
      padding-left: 7.5px;
      padding-right: 7.5px;
    }
  }
  &.gutters-20 {
    padding-left: 5px;
    padding-right: 5px;
    & > [class^="col-"] {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
/*=======================================================================
3. Vendor Custom Style
=========================================================================*/
/*------------------- 3.1 Slick -------------------*/
.slick-slide {
  &:focus {
    outline: none;
  }
}
.slick-arrow {
  visibility: hidden;
  opacity: 0;
  height: 35px;
  width: 35px;
  line-height: 48px;
  background-color: white;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 5;
  &:before {
    font-family: "Font Awesome 5 Free";
    color: #615dfa;
    font-size: 16px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  &:hover {
    background-color: white;
  }
}
.slick-prev {
  left: 30px;
  &:before {
    content: "\f104";
  }
}
.slick-next {
  right: 30px;
  &:before {
    content: "\f105";
  }
}
.slick-dots {
  left: 0;
  bottom: -35px;
  width: auto;
  li {
    margin: 0 8px 0 0;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    button {
      background-color: #cccccc;
      height: 13px;
      width: 13px;
      border-radius: 50%;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      &:before {
        display: none;
      }
    }
    &.slick-active {
      button {
        background-color: #615dfa;
      }
    }
  }
}
/*------------------- 3.2 Select 2 -------------------*/
.select2-container {
  min-width: 250px;
}
.select2-container--classic {
  .select2-selection--single {
    background: #ffffff;
    border: 1px solid #eaeaea;
    height: 40px;
    .select2-selection__rendered {
      line-height: 40px;
      color: #646464;
      padding-left: 20px;
      font-size: 14px;
    }
    &:focus {
      border: 1px solid #eaeaea;
    }
    .select2-selection__arrow {
      background: none;
      border-left: none;
      height: 40px;
      top: 0;
      right: 4px;
      width: 40px;
      b {
        border-color: #646464 transparent transparent transparent;
        border-width: 6px 5px 0 5px;
      }
    }
    .select2-selection__placeholder {
      color: #646464;
    }
  }
  &.select2-container--open {
    .select2-selection--single {
      .select2-selection__arrow {
        b {
          border-color: transparent transparent #646464 transparent;
          border-width: 0 5px 6px 5px;
        }
      }
    }
    &.select2-container--below {
      .select2-selection--single {
        background: #ffffff;
        border-color: #eaeaea;
      }
    }
    &.select2-container--above {
      .select2-selection--single {
        border-color: #eaeaea;
        background: transparent;
        border-top: 1px solid #eaeaea;
      }
    }
    .select2-dropdown {
      border-color: #eaeaea;
      position: inherit !important;
      border-top: 1px solid #eaeaea;
      border-bottom: 1px solid #eaeaea;
    }
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: #615dfa;
  }
}
.select2-results__option {
  padding: 5px 20px;
  font-size: 14px;
}
/*=======================================================================
4. Template Layout Style
=========================================================================*/
/*------------------- 4.1 Back To Top -------------------*/
.scrollup {
  overflow: hidden;
  position: fixed;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  bottom: -100px;
  right: 20px;
  text-align: center;
  z-index: 9999;
  background-color: #615dfa;
  color: #ffffff;
  font-size: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.8s cubic-bezier(0, 0, 0.15, 1.88);
  transition: all 0.8s cubic-bezier(0, 0, 0.15, 1.88);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  &:hover {
    color: #615dfa;
    background-color: #ffffff;
  }
  &:focus {
    color: #ffffff;
  }
  &.back-top {
    bottom: 25px;
  }
}
/*------------------- 4.2 Breadcrumb Banner -------------------*/
.breadcrumbs-banner {
  margin-top: -97px;
  padding: 185px 0 95px;
  background-color: #615dfa;
  background-image: url("../../media/banner/hero_1.jpg");
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  z-index: 1;
  .breadcrumb-animate-img {
    img {
      -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
      -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
      transform: scale(0.6);
    }
  }
  .breadcrumbs-area {
    h1 {
      font-size: 30px;
      color: #ffffff;
      margin-bottom: 6px;
    }
    ul {
      li {
        display: inline-block;
        color: #ffffff;
        position: relative;
        margin-right: 20px;
        font-size: 14px;
        &:after {
          content: "/";
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          right: -14px;
        }
        a {
          color: #ffffff;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:hover {
            color: #5edfff;
          }
        }
        &:last-child {
          margin-right: 0;
          &:after {
            display: none;
          }
        }
      }
    }
  }
}
/*------------------- 4.3 Footer -------------------*/
.footer-wrap {
  background-color: #f0f4f6;
  position: relative;
  z-index: 1;
  &:before {
    content: url("../../media/figure/footer_shape.png");
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
    overflow: hidden;
    line-height: 0;
  }
  .footer-top-image {
    li {
      &:nth-child(1n) {
        left: 50%;
      }
      &:nth-child(2n) {
        left: calc(50% + 135px);
        top: -100px;
      }
      &:nth-child(3n) {
        left: calc(50% - 135px);
        top: -97px;
      }
      &:nth-child(4n) {
        left: calc(50% + 270px);
        top: -97px;
      }
    }
  }
}
.footer-box {
  .footer-logo {
    margin-bottom: 20px;
  }
  .footer-title {
    font-size: 22px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    position: relative;
    &:after {
      content: "";
      height: 3px;
      width: 20px;
      background-color: #615dfa;
      position: absolute;
      bottom: 0;
      left: 8px;
    }
    &:before {
      content: "";
      height: 3px;
      width: 6px;
      background-color: #615dfa;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .footer-link {
    ul {
      li {
        margin-bottom: 7px;
        &:last-child {
          margin-bottom: 0;
        }
        a {
          color: #646464;
          &:hover {
            color: #615dfa;
          }
        }
      }
    }
  }
}
.footer-bottom {
  padding: 30px 0;
  border-top: 1px solid #ececec;
  text-align: center;
  .footer-copyright {
    color: #838383;
  }
}
.footer-dashboard {
  background-color: #ffffff;
  margin-top: 60px;
  .main-footer {
    padding-top: 120px;
  }
}
a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:active,
a:hover,
a:focus {
  text-decoration: none;
  color: #111111;
  outline: 0 none;
}
button:active,
button:hover,
button:focus {
  outline: 0 none;
}
img {
  max-width: 100%;
  height: auto;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
hr {
  margin: 0;
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  margin-left: 0;
}
.item-icon {
  line-height: 1;
  i {
    display: inline-block;
  }
}
/*------------------- 4.5 Helper Classes -------------------*/
.button-slide {
  color: #000000;
  border: 1px solid #d7d7d7;
  border-radius: 30px;
  padding: 4px 3px;
  font-size: 17px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  &:after {
    content: "";
    height: 41px;
    width: 41px;
    background-color: #5edfff;
    border-radius: 30px;
    position: absolute;
    top: 49%;
    right: 5px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: -1;
  }
  .btn-text {
    margin-left: 24px;
  }
  .btn-icon {
    margin-left: 15px;
    height: 41px;
    width: 41px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    svg {
      vertical-align: baseline;
    }
  }
  &:hover {
    &:after {
      width: 95%;
      border-radius: 30px;
    }
  }
}
.bg-common {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bg-fb {
  background-color: #365493;
}
.bg-twitter {
  background-color: #38b8ff;
}
.bg-instagram {
  background-color: #ff3b6e;
}
.bg-pinterest {
  background-color: #cd0f40;
}
.bg-dribble {
  background-color: #ec407a;
}
.bg-youtube {
  background-color: #ff0000;
}
.bg-behance {
  background-color: #2962ff;
}
.color-fb {
  color: #1877f2;
}
.color-twitter {
  color: #1da1f2;
}
.color-instagram {
  color: #c32aa3;
}
.color-messenger {
  color: #00b2ff;
}
.color-whatsapp {
  color: #25d366;
}
.bg-primary {
  background-color: #615dfa !important;
}
.bg-aash {
  background-color: #f8f8f8;
}
.bg-link-water {
  background-color: #eff4fb;
}
.bg-salmon-gradient {
  background-image: -webkit-linear-gradient(left, #ff8a65 30%, #ff5722 100%);
  background-image: linear-gradient(to right, #ff8a65 30%, #ff5722 100%);
}
.bg-amethyst-gradient {
  background-image: -webkit-linear-gradient(left, #4035cd 30%, #ab47bc 100%);
  background-image: linear-gradient(to right, #4035cd 30%, #ab47bc 100%);
}
.bg-sun-gradient {
  background-image: -webkit-linear-gradient(left, #ffd740 30%, #ffcb40 100%);
  background-image: linear-gradient(to right, #ffd740 30%, #ffcb40 100%);
}
.bg-tagerine-gradient {
  background-image: -webkit-linear-gradient(left, #ff8b82 30%, #e53935 100%);
  background-image: linear-gradient(to right, #ff8b82 30%, #e53935 100%);
}
.bg-picton-gradient {
  background-image: -webkit-linear-gradient(left, #4dbdef 30%, #7c4dff 100%);
  background-image: linear-gradient(to right, #4dbdef 30%, #7c4dff 100%);
}
.bg-jungle-gradient {
  background-image: -webkit-linear-gradient(left, #26a69a 30%, #64dd17 100%);
  background-image: linear-gradient(to right, #26a69a 30%, #64dd17 100%);
}
.bg-dodger-gradient {
  background-image: -webkit-linear-gradient(left, #2962ff 30%, #00b0ff 100%);
  background-image: linear-gradient(to right, #2962ff 30%, #00b0ff 100%);
}
.bg-pink-gradient {
  background-image: -webkit-linear-gradient(left, #ef9a9a 30%, #f06292 100%);
  background-image: linear-gradient(to right, #ef9a9a 30%, #f06292 100%);
}
.bg-spring-gradient {
  background-image: -webkit-linear-gradient(left, #00e676 30%, #1de9b6 100%);
  background-image: linear-gradient(to right, #00e676 30%, #1de9b6 100%);
}
.bg-gray-gradient {
  background-image: -webkit-linear-gradient(left, #b0bec5 30%, #607d8b 100%);
  background-image: linear-gradient(to right, #b0bec5 30%, #607d8b 100%);
}
.tooltip-inner {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: #5edfff;
  color: #ffffff;
  box-shadow: 0 4px 16px 0 rgba(107, 220, 248, 0.7);
  z-index: 5;
}
.bs-tooltip-right {
  .arrow {
    &::before {
      border-right-color: #5edfff;
    }
  }
}
.bs-tooltip-bottom {
  .arrow {
    &::before {
      border-bottom-color: #5edfff;
    }
  }
}
.bs-tooltip-top {
  .arrow {
    &::before {
      border-top-color: #5edfff;
    }
  }
}
/* Keyframe Animation */
@-webkit-keyframes {
  moveclouds {
    0% {
        margin-left: 1000px;
  }
}
100% {
  margin-left: -1000px;
  margin-left: -1000px;
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  box-shadow: 0 0 0 0 rgba(12, 31, 215, 0);
  box-shadow: 0 0 0 0 rgba(12, 31, 215, 0);
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  box-shadow: 0 0 0 0 rgba(94, 223, 255, 0);
  box-shadow: 0 0 0 0 rgba(94, 223, 255, 0);
}
40% {
  -webkit-transform: translateX(50px) translateY(-50px);
  transform: translateX(50px) translateY(-50px);
  -webkit-transform: translateX(50px) translateY(-50px);
  transform: translateX(50px) translateY(-50px);
  -webkit-transform: translateX(-50px) translateY(50px);
  transform: translateX(-50px) translateY(50px);
  -webkit-transform: translateX(-50px) translateY(50px);
  transform: translateX(-50px) translateY(50px);
  -webkit-transform: translateX(100px) translateY(-50px);
  transform: translateX(100px) translateY(-50px);
  -webkit-transform: translateX(100px) translateY(-50px);
  transform: translateX(100px) translateY(-50px);
}
75% {
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}
70% {
  box-shadow: 0 0 0 20px rgba(12, 31, 215, 0);
  box-shadow: 0 0 0 20px rgba(12, 31, 215, 0);
  box-shadow: 0 0 0 20px rgba(94, 223, 255, 0);
  box-shadow: 0 0 0 20px rgba(94, 223, 255, 0);
}
60% {
  -webkit-transform: rotate(180deg) scale(1.5);
  transform: rotate(180deg) scale(1.5);
  -webkit-transform: rotate(180deg) scale(1.5);
  transform: rotate(180deg) scale(1.5);
}
80% {
  -webkit-transform: rotate(90deg) scale(0.6);
  transform: rotate(90deg) scale(0.6);
  -webkit-transform: rotate(90deg) scale(0.6);
  transform: rotate(90deg) scale(0.6);
}
header {
  &.header {
    position: relative;
    z-index: 15;
  }
}
.temp-logo {
  position: relative;
}
.header-menu {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  &:after {
    clear: both;
    content: "";
    display: block;
  }
}
nav {
  &.template-main-menu {
    & > ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      & > li {
        position: relative;
        & > a {
          font-size: 15px;
          font-weight: 600;
          line-height: 1;
          display: block;
          color: #ffffff;
          padding: 40px 15px;
        }
        a {
          &.have-sub {
            position: relative;
            &:after {
              content: "\eab2";
              font-family: IcoFont !important;
              font-size: 14px;
              color: #ffffff;
              font-weight: 400;
              padding-left: 6px;
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
            }
            &:hover {
              &:after {
                color: #5edfff;
              }
            }
          }
        }
        ul {
          &.sub-menu {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 15px;
            width: 230px;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 85%;
            left: 0;
            -webkit-transform: translate(0, -20px);
            -ms-transform: translate(0, -20px);
            transform: translate(0, -20px);
            pointer-events: none;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
            transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
            &:before {
              content: "";
              width: 0;
              height: 0;
              border-bottom: 10px solid #ffffff;
              border-left: 7px solid transparent;
              border-right: 7px solid transparent;
              position: absolute;
              top: -10px;
              left: 30px;
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
            }
            li {
              position: relative;
              a {
                overflow: hidden;
                position: relative;
                font-size: 15px;
                font-weight: 500;
                text-transform: capitalize;
                color: #444444;
                padding: 2px 0;
                display: block;
                &:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  background: -webkit-linear-gradient(bottom, #ff630e 0%, #ff000a 100%);
                  background: linear-gradient(to top, #ff630e 0%, #ff000a 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  position: absolute;
                  top: 0;
                  left: 0;
                  -webkit-transition: all 0.3s ease-in-out;
                  transition: all 0.3s ease-in-out;
                }
                &:hover {
                  color: #5edfff;
                }
              }
            }
          }
          &.mega-menu {
            padding: 10px 0;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 85%;
            -webkit-transform: translate(0, -20px);
            -ms-transform: translate(0, -20px);
            transform: translate(0, -20px);
            pointer-events: none;
            visibility: hidden;
            opacity: 0;
            transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
            &:before {
              content: "";
              width: 0;
              height: 0;
              border-bottom: 10px solid #ffffff;
              border-left: 7px solid transparent;
              border-right: 7px solid transparent;
              position: absolute;
              top: -10px;
              left: 150px;
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
            }
            & > li {
              width: 230px;
              display: inline-block;
              margin: 0 5px;
              float: left;
              & > ul {
                &.sub-menu {
                  position: relative;
                  width: 100%;
                  border: none;
                  box-shadow: none;
                  visibility: visible;
                  opacity: 1;
                  -webkit-transform: translate(0, 0);
                  -ms-transform: translate(0, 0);
                  transform: translate(0, 0);
                  &:before {
                    display: none;
                  }
                }
              }
            }
          }
          &.mega-menu-col-2 {
            width: 480px;
            left: -100px;
            padding: 0;
          }
        }
        &:hover {
          ul {
            &.sub-menu {
              opacity: 1;
              visibility: visible;
              -webkit-transform: translate(0, 0);
              -ms-transform: translate(0, 0);
              transform: translate(0, 0);
              pointer-events: auto;
            }
            &.mega-menu {
              opacity: 1;
              visibility: visible;
              -webkit-transform: translate(0, 0);
              -ms-transform: translate(0, 0);
              transform: translate(0, 0);
              pointer-events: auto;
            }
          }
        }
      }
    }
  }
}
.menu-layout1 {
  padding: 0 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.rt-sticky {
  nav {
    &.template-main-menu {
      & > ul {
        & > li {
          & > a {
            padding: 30px 15px;
          }
        }
      }
    }
  }
}
.header-action {
  ul {
    li {
      margin-right: 26px;
      &:last-child {
        margin-right: 0;
      }
    }
    .header-social {
      position: relative;
      margin-right: 45px;
      a {
        color: #ffffff;
        padding: 5px;
        margin-right: 4px;
        &:hover {
          color: #5edfff;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .header-search-icon {
      a {
        &:hover {
          color: #5edfff;
        }
      }
    }
    .login-btn {
      a {
        color: #000000;
        background-color: #ffffff;
        padding: 8px 25px;
        font-weight: 700;
        border-radius: 4px;
      }
    }
  }
}
.header-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translate(0px, -100%) scale(0, 0);
  -ms-transform: translate(0px, -100%) scale(0, 0);
  transform: translate(0px, -100%) scale(0, 0);
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  .header-search-form {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    input[type="search"] {
      width: 60%;
      color: white;
      font-size: 24px;
      text-align: left;
      border: none;
      margin: 0 auto;
      padding: 25px 10px 25px 30px;
      outline: none;
      background: -webkit-linear-gradient(left, transparent, rgba(200, 200, 200, 0.5), transparent);
      background: linear-gradient(to right, transparent, rgba(200, 200, 200, 0.5), transparent);
    }
    .search-btn {
      i {
        &:before {
          font-size: 24px;
          font-weight: 700;
          color: #ffffff;
          margin-left: 0;
        }
      }
      &:focus {
        box-shadow: none;
        outline: none;
      }
    }
  }
  .close {
    position: fixed;
    top: 15px;
    right: 15px;
    color: #111111;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    opacity: 1;
    visibility: visible;
    padding: 3px 15px 5px;
    font-size: 36px;
    font-weight: 300;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 1px 2px 0px rgba(255, 255, 255, 0.75);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:focus {
      box-shadow: none;
      border: none;
      outline: none;
    }
    &:hover {
      background-color: white;
    }
  }
  &.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -ms-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
    opacity: 1;
    visibility: visible;
  }
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .header-menu {
    padding: 0 90px !important;
    background-color: #615dfa;
  }
  .header-control {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    .inline-item {
      margin-right: 40px;
      position: relative;
      &:last-child {
        &:after {
          display: none;
        }
      }
    }
    .input-group {
      background-color: #534fee;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      width: 250px;
      .input-group-append {
        margin: 0 3px 0 0;
      }
      .submit-btn {
        background-color: #5edfff;
        border: none;
        color: #ffffff;
        height: 36px;
        width: 36px;
        border-radius: 50%;
        position: relative;
        &:before {
          content: "";
          width: 13px;
          height: 5px;
          background-color: #ffffff;
          border-radius: 50%;
          position: absolute;
          top: 2px;
          right: 6px;
          -webkit-transform: rotate(24deg);
          -ms-transform: rotate(24deg);
          transform: rotate(24deg);
          opacity: 0.8;
        }
      }
    }
    .dropdown {
      margin-right: 10px;
      .dropdown-toggle {
        background-color: transparent;
        border: none;
        font-size: 22px;
        color: #4a47c3;
        position: relative;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        &:hover {
          color: #ffffff;
        }
      }
      .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        border: none;
        border-radius: 8px;
        min-width: 330px;
        padding: 0;
        top: 58px;
        right: -35px;
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
        .item-heading {
          .heading-title {
            margin-bottom: 0;
            font-weight: 700;
            color: #000000;
          }
          .heading-btn {
            text-align: right;
            a {
              font-size: 12px;
              color: #9e9faf;
              margin-right: 12px;
              &:hover {
                color: #615dfa;
              }
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
        .item-body {
          background-color: #f6f9fd;
          .media {
            padding: 20px 25px 15px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            &:nth-child(even) {
              background-color: #ffffff;
            }
            .item-img {
              margin-right: 15px;
              margin-top: 5px;
              img {
                border-radius: 50%;
              }
            }
            .media-body {
              position: relative;
            }
            .item-title {
              font-size: 14px;
              font-weight: 700;
              color: #000000;
              margin-bottom: 1px;
            }
            p {
              font-size: 14px;
              color: #71728c;
              line-height: 18px;
              font-weight: 600;
            }
            .item-time {
              position: absolute;
              top: 0;
              right: 0;
              font-size: 12px;
              color: #9e9faf;
              font-weight: 600;
            }
            &:hover {
              background-color: #ffffff;
            }
          }
        }
        .item-footer {
          .view-btn {
            text-align: center;
            background-color: #615dfa;
            display: block;
            color: #ffffff;
            font-weight: 700;
            font-size: 14px;
            border-radius: 0 0 8px 8px;
            padding: 15px 0;
            &:hover {
              background-color: #5edfff;
            }
          }
        }
        &.show {
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
        }
      }
    }
    .dropdown-friend {
      .dropdown-menu {
        .item-body {
          background-color: #ffffff;
          .media {
            border-bottom: 1px solid #e8edf4;
            padding: 26px 22px 18px;
            &:last-child {
              border-bottom: none;
            }
            .item-img {
              margin-top: 0;
              position: relative;
              &:after {
                content: url("../../media/figure/chat_round_shape3.png");
                position: absolute;
                top: -5px;
                left: -5px;
              }
              img {
                height: 38px;
                width: 38px;
              }
              .chat-status {
                display: block;
                height: 12px;
                width: 12px;
                border: 3px solid #ffffff;
                border-radius: 50%;
                box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.3);
                position: absolute;
                top: -5px;
                left: -3px;
                z-index: 2;
                &.offline {
                  background-color: #b0bacb;
                }
                &.online {
                  background-color: #17dd17;
                }
              }
            }
            .item-title {
              line-height: 18px;
              a {
                color: #000000;
                &:hover {
                  color: #615dfa;
                }
              }
            }
            p {
              font-size: 12px;
              color: #9e9faf;
              line-height: 18px;
            }
            .btn-area {
              position: absolute;
              top: 0;
              right: 0;
              a {
                text-align: center;
                font-size: 12px;
                color: #ffffff;
                width: 29px;
                height: 28px;
                background-color: #cbdaef;
                border-radius: 4px;
                &:hover {
                  background-color: #5edfff;
                }
              }
            }
          }
        }
      }
    }
    .dropdown-cart {
      .dropdown-menu {
        .item-heading {
          .heading-title {
            span {
              color: #5edfff;
            }
          }
        }
        .item-body {
          background-color: #ffffff;
          .media {
            border-bottom: 1px solid #e8edf4;
            padding: 15px 22px;
            &:last-child {
              border-bottom: none;
            }
            .item-img {
              img {
                border-radius: 4px;
              }
            }
            .item-title {
              line-height: 18px;
              margin-bottom: 2px;
              a {
                color: #000000;
                &:hover {
                  color: #615dfa;
                }
              }
            }
            .item-category {
              font-size: 12px;
              color: #9e9faf;
              line-height: 18px;
              margin-bottom: 4px;
            }
            .item-price {
              color: #615dfa;
              font-weight: 700;
            }
            .btn-area {
              position: absolute;
              top: 0;
              right: 0;
              a {
                text-align: center;
                font-size: 10px;
                font-weight: 600;
                color: #d1d5d9;
                width: 29px;
                height: 28px;
                border: 1px solid #d7d7d7;
                border-radius: 4px;
                &:hover {
                  background-color: #5edfff;
                  border-color: #5edfff;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }
    .dropdown-admin {
      .dropdown-toggle {
        padding-right: 28px;
        .item-img {
          img {
            border-radius: 50%;
          }
          .acc-verified {
            position: absolute;
            top: -6px;
            right: -12px;
            height: 21px;
            width: 21px;
            line-height: 21px;
            background-color: #17dd17;
            border-radius: 50%;
            font-size: 18px;
            color: #ffffff;
            z-index: 1;
          }
        }
        .item-title {
          margin-bottom: 0;
          color: #eff4fb;
          font-weight: 400;
          font-size: 16px;
          display: block;
        }
      }
      .dropdown-menu {
        top: 64px;
        min-width: 230px;
        border: 1px solid #dee5ef;
        .admin-options {
          li {
            border-bottom: 1px solid #e5ebf3;
            &:last-child {
              border-bottom: none;
            }
          }
          a {
            color: #8c8c8c;
            font-size: 14px;
            padding-left: 18px;
            padding: 10px 0 10px 18px;
            display: block;
            position: relative;
            &:before {
              content: "";
              height: 6px;
              width: 6px;
              background-color: #71728c;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 0;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%);
            }
            &:hover {
              color: #5edfff;
            }
          }
        }
      }
    }
    .dropdown-message {
      .dropdown-menu {
        &:before {
          left: 112px;
        }
      }
    }
    .dropdown-notification {
      .dropdown-menu {
        &:before {
          left: 145px;
        }
      }
    }
  }
}
.fixed-header .header-control .input-group input.form-control::-webkit-input-placeholder,
      .fixed-header .header-control .input-group textarea.form-control::-webkit-input-placeholder {
  color: #c5c3ff;
  letter-spacing: 1px;
}
.fixed-sidebar {
  .fixed-sidebar-left {
    position: absolute;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    &.small-sidebar {
      width: 90px;
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
  }
  .sidebar-toggle {
    background-color: #5854ef;
    text-align: center;
    height: 89px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    .toggle-btn {
      span {
        &:before {
          content: "";
          width: 8px;
          height: 3px;
          background-color: #5edfff;
          border-radius: 2px;
          position: absolute;
          top: 0;
          left: -11px;
        }
        &:nth-child(even):before {
          left: auto;
          right: -11px;
        }
      }
    }
  }
  .sidebar-menu-wrap {
    height: 100%;
    box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.03);
    background-color: #ffffff;
    .side-menu {
      padding: 30px 0;
      li {
        margin-bottom: 18px;
      }
      .menu-link {
        font-size: 24px;
        color: #8793a3;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 0 10px 32px;
        i {
          margin-right: 12px;
        }
        .menu-title {
          font-size: 14px;
          font-weight: 700;
        }
        &:hover {
          color: #5edfff;
        }
      }
    }
    .top-menu-mobile {
      padding-bottom: 20px;
      .menu-link {
        padding: 2px 0 2px 32px;
        color: #444444;
        font-size: 14px;
        font-weight: 600;
        &:hover {
          color: #5edfff;
        }
      }
    }
  }
  .mCustomScrollbar {
    max-height: calc(100vh - 100px);
  }
  &.lg-menu-open {
    z-index: 15;
    .fixed-sidebar-left {
      -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      &.small-sidebar {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      &.large-sidebar {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
      }
    }
  }
  &.right {
    left: auto;
    right: 0;
    .fixed-sidebar-right {
      position: absolute;
      height: 100%;
      right: 0;
    }
    .sidebar-toggle {
      &:hover {
        background-color: #5854ef;
      }
      .chat-icon {
        background-color: transparent;
        border: none;
        font-size: 30px;
        color: #ffffff;
        padding: 10px;
      }
    }
    .user-chat-list {
      .chat-item {
        text-align: center;
        cursor: pointer;
        margin-bottom: 30px;
        .author-img {
          position: relative;
          display: inline-block;
          &:after {
            content: url("../../media/figure/chat_round_shape.png");
            position: absolute;
            top: -5px;
            left: -5px;
            z-index: 1;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
          img {
            border-radius: 50%;
          }
          .chat-status {
            display: block;
            height: 12px;
            width: 12px;
            border: 3px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.3);
            position: absolute;
            top: -4px;
            left: -2px;
            z-index: 2;
            &.offline {
              background-color: #b0bacb;
            }
            &.online {
              background-color: #17dd17;
            }
          }
        }
        &:hover {
          .author-img {
            &:before {
              visibility: visible;
              opacity: 1;
              -webkit-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
              transform: rotate(0deg);
            }
            &:after {
              visibility: hidden;
              opacity: 0;
            }
          }
        }
      }
    }
    .sidebar-menu-wrap {
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
  }
}
.mCSB_inside {
  & > .mCSB_container {
    margin-right: 0;
  }
}
.wrapper {
  &.open {
    .closeMask {
      content: "";
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
    }
  }
}
.chat-conversion-box {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 100;
  .modal-dialog {
    max-width: 350px;
    width: 100%;
    position: fixed;
    right: 0;
    bottom: -10%;
    margin: 10px 90px 0 0;
    z-index: 10;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .modal-header {
    padding: 0 15px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #615dfa;
    border: none;
    .modal-title {
      color: #ffffff;
      position: relative;
      .online {
        display: block;
        height: 8px;
        width: 8px;
        background-color: #17dd17;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: -20px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
    .chat-shrink {
      background-color: transparent;
      border: none;
      padding: 10px;
      color: #ffffff;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      &:hover {
        color: #5edfff;
      }
    }
    .chat-close {
      text-shadow: none;
      padding: 10px;
      margin: 0;
      color: #ffffff;
      opacity: 1;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      &:hover {
        color: #5edfff;
      }
    }
  }
  .modal-body {
    padding: 30px 15px;
    .chat-conversion {
      li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 30px;
        &:last-child {
          margin-bottom: 0;
        }
        .author-img {
          margin-right: 20px;
        }
        img {
          border-radius: 50%;
        }
        .author-text {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          span {
            display: block;
            font-size: 13px;
            line-height: 20px;
            background-color: #5edfff;
            color: #ffffff;
            padding: 15px;
            border-radius: 10px;
            position: relative;
            &:before {
              content: "";
              width: 0;
              height: 0;
              border-right: 15px solid #5edfff;
              border-top: 2px solid transparent;
              border-bottom: 15px solid transparent;
              position: absolute;
              top: 50%;
              left: -15px;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%);
            }
          }
        }
      }
      .chat-you {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        .author-img {
          margin-left: 20px;
          margin-right: 0;
        }
        .author-text {
          span {
            &:before {
              left: auto;
              right: -15px;
              border-right: none;
              border-left: 15px solid #5edfff;
              border-top: 2px solid transparent;
              border-bottom: 15px solid transparent;
            }
          }
        }
      }
    }
  }
  .modal-footer {
    border-color: #f3f3f3;
    display: block;
    padding: 20px 15px;
    .form-group {
      position: relative;
      .chat-plus-icon {
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 18px;
        color: #5edfff;
        cursor: pointer;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        &:hover {
          color: #615dfa;
        }
      }
      .file-attach-icon {
        position: absolute;
        top: 50%;
        right: 30px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #ffffff;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        a {
          color: #615dfa;
          padding: 3px;
          &:hover {
            color: #5edfff;
          }
        }
        &.show {
          visibility: visible;
          opacity: 1;
          right: 40px;
        }
      }
    }
    .form-control {
      border-radius: 30px;
      font-size: 14px;
      height: 42px;
      border-color: #e0e0e0;
      padding: 10px 35px 10px 20px;
    }
  }
  &.modal-show {
    visibility: visible;
    opacity: 1;
    .modal-dialog {
      bottom: 0;
    }
  }
  &.shrink {
    .modal-body {
      display: none;
    }
    .modal-footer {
      display: none;
    }
  }
}
.chat-conversion-box .modal-footer input.form-control::-webkit-input-placeholder,
    .chat-conversion-box .modal-footer textarea.form-control::-webkit-input-placeholder {
  color: #cccccc;
}
.mobile-nav-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin-right: 20px;
}
.mobile-toggler {
  button {
    border: none;
    background-color: transparent;
    font-size: 24px;
    color: #ffffff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding: 0;
    &:focus {
      outline: none;
    }
    &:hover {
      opacity: 0.9;
    }
  }
}
.mobile-toggle-close {
  display: none;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 5px 6px;
  color: #ccc;
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 20px;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  &:focus {
    outline: none;
  }
  &:hover {
    color: #5edfff;
    background-color: #ffffff;
  }
}
.mobile-menu-wrapper {
  .header-menu {
    padding: 10px 0;
  }
  .mobile-toggler {
    display: block;
  }
  nav {
    &.template-main-menu {
      width: 270px;
      position: fixed;
      top: 0;
      left: -280px;
      bottom: 0;
      background-color: #615dfa;
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
      padding: 80px 10px 30px;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      z-index: 5;
      .mobile-toggle-close {
        display: block;
      }
      & > ul {
        overflow-y: auto;
        height: 100%;
        display: block !important;
        & > li {
          & > a {
            text-align: center;
            padding: 20px !important;
            color: #ffffff;
            &:hover {
              color: #ffffff;
            }
          }
          a {
            &.have-sub {
              &:after {
                display: none;
              }
            }
          }
          .sub-menu {
            display: none;
            border-top: none;
            width: auto;
            position: relative;
            top: 0;
            opacity: 1;
            visibility: visible;
            -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transform-origin: inherit;
            -ms-transform-origin: inherit;
            transform-origin: inherit;
            background-color: transparent;
            box-shadow: none;
            padding: 0;
            &:before {
              display: none;
            }
            li {
              a {
                -webkit-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
                padding: 0 0 10px 0;
                text-align: center;
                color: #e6e5ff;
                &:before {
                  display: none;
                }
                &:hover {
                  color: #ffffff;
                  padding: 0 0 10px 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.mobile-menu-expand {
  nav {
    &.template-main-menu {
      left: 0;
    }
  }
}
/*------------------- 4.7 Pagination -------------------*/
.pagination {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 80px;
  margin-top: 30px;
  li {
    display: inline-block;
    a {
      background-color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      color: #000000;
      padding: 10px 17px;
      border-radius: 5px;
      &:hover {
        background-color: #615dfa;
        color: #ffffff;
      }
      &.active {
        background-color: #615dfa;
        color: #ffffff;
      }
    }
  }
}
/*------------------- 4.8 Preloader -------------------*/
#preloader {
  background: #ffffff url("../../media/preloader.gif") no-repeat scroll center center;
  height: 100%;
  left: 0;
  overflow: visible;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
/*------------------- 4.9 Section -------------------*/
.section {
  padding: 114px 0 100px;
  .section-heading {
    p {
      color: #71728c;
      width: 50%;
      margin: 0 auto;
    }
  }
}
.section-typography h1, .section-typography h2, .section-typography h3, .section-typography h4, .section-typography h5, .section-typography h6 {
  font-weight: 400;
  margin-bottom: 0;
}
.section-typography {
  .table {
    td {
      padding: 20px 10px;
      vertical-align: middle;
    }
  }
}
/*=======================================================================
5. Template Page Style
=========================================================================*/
/*------------------- 5.1 About -------------------*/
.about-us {
  padding: 120px 0 110px;
  .about-us-content {
    & > .item-title {
      width: 80%;
      margin-bottom: 22px;
    }
    .media {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      margin-right: 45px;
      .item-icon {
        margin-right: 20px;
        font-size: 36px;
        color: #5edfff;
      }
    }
  }
  .about-us-img {
    text-align: right;
    position: relative;
    .item-img {
      display: inline-block;
      position: relative;
      &:after {
        content: url("../../media/about/shape_1.png");
        position: absolute;
        right: -10px;
        bottom: -55px;
      }
    }
    .item-video {
      .video-icon {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        .play-btn {
          font-size: 22px;
          height: 60px;
          width: 60px;
          line-height: 54px;
          background-color: #615dfa;
          border: 3px solid #ffffff;
          color: #ffffff;
          border-radius: 50%;
          i {
            margin-left: 5px;
          }
          &:hover {
            background-color: #5edfff;
          }
        }
      }
    }
  }
}
/*------------------- 5.2 Banner -------------------*/
.hero-banner {
  margin-top: -97px;
  padding: 200px 0 120px;
  min-height: calc(100vh - 180px);
  background-color: #615dfa;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  z-index: 5;
  .hero-content {
    position: relative;
    z-index: 3;
    .item-title {
      color: #ffffff;
      margin-bottom: 14px;
    }
    p {
      color: #ffffff;
      width: 35%;
      margin-bottom: 40px;
    }
    .button-slide {
      border-color: #ffffff;
      color: #ffffff;
      background-color: #615dfa;
    }
  }
  .map-line {
    position: absolute;
    bottom: 0;
    left: 11%;
    z-index: -1;
    .map-marker {
      li {
        &:nth-child(1n) {
          top: 0;
          right: 40%;
        }
        &:nth-child(2n) {
          top: 33%;
          right: 50%;
        }
        &:nth-child(3n) {
          top: 60%;
          right: 37%;
        }
        &:nth-child(4n) {
          top: 38%;
          right: 21%;
        }
        &:after {
          content: "";
          height: 6px;
          width: 33px;
          background-color: #403cd9;
          border-radius: 50%;
          position: absolute;
          top: 33px;
          left: -5px;
          -webkit-animation: pulse 1500ms infinite;
          animation: pulse 1500ms infinite;
        }
      }
    }
  }
  .leftside-image {
    .cartoon-image {
      img {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
      }
    }
    .shape-image {
      img {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
      }
    }
  }
}
.banner-newsletter {
  .newsletter-box {
    .item-title {
      margin-bottom: 12px;
    }
    p {
      color: #71728c;
      width: 60%;
      margin: 0 auto 22px;
    }
    .input-group {
      .input-group-append {
        .button-slide {
          .btn-icon {
            margin-left: 0;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
          }
          &:after {
            background-color: transparent;
          }
          &:hover {
            background-color: #5bc6e0;
          }
        }
      }
    }
  }
  .section-shape {
    li {
      position: absolute;
      &:nth-child(1n) {
        top: 50px;
        left: 0;
        -webkit-animation: movingleftright1 15000ms infinite;
        animation: movingleftright1 15000ms infinite;
      }
      &:nth-child(2n) {
        top: 200px;
        left: 22%;
        -webkit-animation: movingleftright2 20000ms infinite;
        animation: movingleftright2 20000ms infinite;
      }
      &:nth-child(3n) {
        top: 220px;
        left: 50%;
        -webkit-animation: movingleftright3 25000ms infinite;
        animation: movingleftright3 25000ms infinite;
      }
      &:nth-child(4n) {
        top: 130px;
        left: 90%;
        -webkit-animation: movingleftright2 15000ms infinite;
        animation: movingleftright2 15000ms infinite;
      }
      &:nth-child(5n) {
        top: -130px;
        left: 40%;
        -webkit-animation: movingleftright1 30000ms infinite;
        animation: movingleftright1 30000ms infinite;
      }
    }
  }
  .section-cloud {
    li {
      position: absolute;
      &:nth-child(1n) {
        top: 20%;
        -webkit-animation: moveclouds 35s linear infinite;
        animation: moveclouds 35s linear infinite;
      }
      &:nth-child(2n) {
        bottom: 0;
        top: auto;
        -webkit-animation: moveclouds 45s linear infinite;
        animation: moveclouds 45s linear infinite;
      }
      &:nth-child(3n) {
        -webkit-animation: moveclouds 36s linear infinite;
        animation: moveclouds 36s linear infinite;
      }
      &:nth-child(4n) {
        -webkit-animation: moveclouds 40s linear infinite;
        animation: moveclouds 40s linear infinite;
      }
    }
  }
}
.banner-apps {
  background-color: #f8f8f8;
  position: relative;
  .banner-img {
    padding-top: 100px;
    position: relative;
    z-index: 1;
    .apps-view {
      text-align: center;
      position: relative;
      &:before {
        content: url("../../media/banner/shape_5.png");
        position: absolute;
        top: 30px;
        left: 30px;
        -webkit-animation: movingleftright2 15000ms linear infinite;
        animation: movingleftright2 15000ms linear infinite;
      }
      &:after {
        content: url("../../media/banner/shape_6.png");
        position: absolute;
        bottom: 25%;
        right: 60px;
        -webkit-animation: movingleftright1 20000ms linear infinite;
        animation: movingleftright1 20000ms linear infinite;
      }
    }
  }
}
/*------------------- 5.3 Blog -------------------*/
.blog-grid {
  .blog-box {
    margin-bottom: 30px;
    .blog-img {
      position: relative;
      margin-bottom: 18px;
      a {
        display: block;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        &:after {
          content: "";
          height: 60%;
          width: 100%;
          background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.6), transparent);
          background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
          border-radius: 0 0 8px 8px;
          position: absolute;
          bottom: 0;
          left: 0;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
      }
      img {
        border-radius: 8px;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      .blog-date {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #615dfa;
        border-radius: 0 5px 0 5px;
        font-weight: 700;
        color: #ffffff;
        padding: 5px 16px;
        i {
          margin-right: 8px;
        }
      }
    }
    .blog-content {
      .blog-title {
        margin-bottom: 14px;
        font-size: 22px;
        a {
          &:hover {
            color: #5edfff;
          }
        }
      }
      .entry-meta {
        li {
          display: inline-block;
          color: #71728c;
          position: relative;
          &:last-child {
            &:after {
              display: none;
            }
          }
          &:after {
            content: "/";
            padding: 0 10px 0 12px;
          }
          a {
            color: #71728c;
            &:hover {
              color: #5edfff;
            }
          }
          i {
            color: #bcbcc7;
            margin-right: 10px;
          }
        }
      }
    }
    &:hover {
      .blog-img {
        img {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
        }
      }
    }
  }
}
/*------------------- 5.4 Community -------------------*/
.community-network {
  background-color: #f6f6f6;
  padding: 125px 0;
  background-image: url("../../media/figure/map_1.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  position: relative;
  z-index: 1;
  .community-content {
    p {
      color: #71728c;
    }
  }
  .map-marker {
    li {
      &:nth-child(1n) {
        top: 35px;
        left: 11%;
      }
      &:nth-child(2n) {
        top: 60px;
        left: 25%;
      }
      &:nth-child(3n) {
        top: 230px;
        left: 28%;
      }
      &:nth-child(4n) {
        top: 115px;
        left: 37%;
      }
      &:nth-child(5n) {
        top: 185px;
        left: 16%;
      }
      &:after {
        content: "";
        height: 6px;
        width: 33px;
        background-color: #bcbcbc;
        border-radius: 50%;
        position: absolute;
        top: 33px;
        left: -5px;
        -webkit-animation: pulse 1500ms infinite;
        animation: pulse 1500ms infinite;
      }
    }
  }
}
/*------------------- 5.5 Contact Us -------------------*/
.contact-page {
  .map-area {
    .google-map {
      height: 520px;
    }
  }
  .contact-box-wrap {
    .contact-form {
      margin-top: -115px;
      background-color: #ffffff;
      padding: 60px 70px 50px;
      box-shadow: 0 18px 40px 0 rgba(16, 9, 30, 0.06);
      position: relative;
    }
    .contact-box {
      .item-title {
        &:after {
          content: "";
          height: 3px;
          width: 20px;
          background-color: #615dfa;
          position: absolute;
          bottom: 0;
          left: 8px;
        }
      }
    }
    .contact-method {
      padding-left: 20px;
      margin-bottom: 0;
    }
  }
}
/*------------------- 5.6 Groups -------------------*/
.groups-popular {
  .groups-box {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    .item-img {
      position: relative;
      border-radius: 4px;
      z-index: 1;
      &:after {
        content: "";
        height: 100%;
        width: 100%;
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent);
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        border-radius: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      img {
        border-radius: 4px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
    .item-content {
      .item-title {
        font-size: 18px;
        a {
          color: #ffffff;
          &:hover {
            color: #5edfff;
          }
        }
      }
      .groups-member {
        font-size: 13px;
        font-weight: 700;
        background-color: #615dfa;
        color: #ffffff;
        display: inline-block;
        border-radius: 12px;
        padding: 0 14px;
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
    &:hover {
      .item-img {
        img {
          -webkit-filter: grayscale(0);
          filter: grayscale(0);
        }
      }
      .item-content {
        top: 50%;
        .groups-member {
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
          visibility: visible;
          opacity: 1;
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
      }
    }
  }
  .see-all-btn {
    text-align: center;
    margin-top: 55px;
    margin-bottom: 20px;
  }
}
/*------------------- 5.7 Location -------------------*/
.location-find {
  .location-box {
    position: relative;
    margin-bottom: 20px;
    .item-img {
      position: relative;
      overflow: hidden;
      border-radius: 4px;
      &:after {
        content: "";
        height: 60%;
        width: 100%;
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9), transparent);
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
        border-radius: 0 0 4px 4px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }
      a {
        display: block;
      }
      img {
        border-radius: 4px;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        width: 100%;
      }
    }
    .item-content {
      position: absolute;
      bottom: 30px;
      left: 30px;
      .item-title {
        font-size: 22px;
        position: relative;
        padding-left: 16px;
        margin-bottom: 0;
        &:before {
          content: "";
          height: 18px;
          width: 4px;
          background-color: #6f6f6f;
          border-radius: 2px;
          position: absolute;
          top: 50%;
          left: 0;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
        a {
          color: #ffffff;
          &:hover {
            color: #5edfff;
          }
        }
      }
    }
    &:hover {
      .item-img {
        img {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
        }
      }
      .item-content {
        .item-title {
          &:before {
            background-color: #5edfff;
          }
        }
      }
    }
  }
}
/*------------------- 5.8 Team -------------------*/
.team-circle {
  .nav-tabs {
    border-bottom: none;
    position: relative;
    height: 100%;
    .nav-item {
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(2n) {
        -webkit-transform: scale(0.55);
        -ms-transform: scale(0.55);
        transform: scale(0.55);
        top: 34%;
        left: -25%;
      }
      &:nth-child(3n) {
        -webkit-transform: scale(0.55);
        -ms-transform: scale(0.55);
        transform: scale(0.55);
        top: 44%;
        right: -35%;
      }
    }
    .nav-link {
      padding: 0;
      border: none;
      background-color: transparent;
      img {
        border-radius: 50%;
      }
    }
  }
  .nav-tabs-right {
    .nav-item {
      &:nth-child(2n) {
        -webkit-transform: scale(0.55);
        -ms-transform: scale(0.55);
        transform: scale(0.55);
        top: 0;
        left: auto;
        right: -17%;
      }
      &:nth-child(3n) {
        -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
        top: 34%;
        right: -40%;
      }
    }
  }
  .tab-content {
    padding: 50px 30px 110px;
  }
  .team-box {
    display: inline-block;
    position: relative;
    .item-img {
      position: relative;
      &:before {
        content: "";
        height: 100%;
        width: 100%;
        background-color: rgba(93, 93, 250, 0.85);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        z-index: 1;
      }
      img {
        border-radius: 50%;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    }
    .item-content {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      z-index: 2;
      .item-title {
        font-size: 24px;
        position: relative;
        padding-bottom: 16px;
        margin-bottom: 8px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        a {
          color: #ffffff;
          &:hover {
            color: #5edfff;
          }
        }
        &:before {
          content: "";
          height: 3px;
          width: 10px;
          background-color: #ffffff;
          border-radius: 4px;
          position: absolute;
          left: -32px;
          right: 0;
          bottom: 0;
          margin: 0 auto;
        }
        &:after {
          content: "";
          height: 3px;
          width: 30px;
          background-color: #ffffff;
          border-radius: 4px;
          position: absolute;
          left: 13px;
          right: 0;
          bottom: 0;
          margin: 0 auto;
        }
      }
      .group-count {
        font-size: 18px;
        color: #ffffff;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        span {
          font-weight: 700;
        }
      }
    }
  }
  .see-all-btn {
    text-align: center;
    padding: 10px 0 20px;
  }
  .shape-wrap {
    li {
      position: absolute;
      z-index: -1;
      &:nth-child(1n) {
        top: -4%;
        left: 16%;
        -webkit-animation: movingleftright1 15000ms linear infinite;
        animation: movingleftright1 15000ms linear infinite;
      }
      &:nth-child(2n) {
        top: 33%;
        left: 9%;
        -webkit-animation: movingleftright2 25000ms linear infinite;
        animation: movingleftright2 25000ms linear infinite;
      }
      &:nth-child(3n) {
        top: 78%;
        left: 18%;
        -webkit-animation: movingleftright3 20000ms linear infinite;
        animation: movingleftright3 20000ms linear infinite;
      }
      &:nth-child(4n) {
        top: 8%;
        left: 35%;
        -webkit-animation: movingleftright2 20000ms linear infinite;
        animation: movingleftright2 20000ms linear infinite;
      }
      &:nth-child(5n) {
        top: 73%;
        left: 46%;
        -webkit-animation: movingleftright1 30000ms linear infinite;
        animation: movingleftright1 30000ms linear infinite;
      }
      &:nth-child(6n) {
        top: 10%;
        left: 61%;
        -webkit-animation: movingleftright3 25000ms linear infinite;
        animation: movingleftright3 25000ms linear infinite;
      }
      &:nth-child(7n) {
        top: 4%;
        left: 82%;
        -webkit-animation: movingleftright2 30000ms linear infinite;
        animation: movingleftright2 30000ms linear infinite;
      }
      &:nth-child(8n) {
        top: 70%;
        left: 60%;
        -webkit-animation: movingleftright1 40000ms linear infinite;
        animation: movingleftright1 40000ms linear infinite;
      }
    }
  }
}
/*------------------- 5.9 Testimonial -------------------*/
.testimonial-carousel {
  padding: 120px 0 100px;
  background-image: url("../../media/testimonial/bg_1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  position: relative;
  .testimonial-content {
    .item-title {
      font-size: 24px;
      color: #ffffff;
      margin-bottom: 4px;
    }
    .item-subtitle {
      font-size: 14px;
      color: #d4d3ff;
      margin-bottom: 25px;
    }
    p {
      font-size: 18px;
      color: #ffffff;
    }
  }
  .slick-nav {
    max-width: 300px;
    margin: 0 auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    .slick-list {
      padding: 0 !important;
    }
    .nav-item {
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      padding: 8px;
      margin-bottom: 20px;
      position: relative;
      &:before {
        content: url("../../media/testimonial/shape_1.png");
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      img {
        display: inline-block;
        border-radius: 50%;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        -webkit-transform: scale(0.85);
        -ms-transform: scale(0.85);
        transform: scale(0.85);
        box-shadow: 0 17px 21px 0 rgba(21, 17, 164, 0.46);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
    .slick-center {
      &:before {
        visibility: visible;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
      }
    }
  }
  .shape-wrap {
    li {
      position: absolute;
      &:nth-child(1n) {
        top: 16%;
        left: 13%;
        -webkit-animation: movingleftright1 15000ms linear infinite;
        animation: movingleftright1 15000ms linear infinite;
      }
      &:nth-child(2n) {
        top: 2%;
        left: 45%;
        -webkit-animation: movingleftright2 25000ms linear infinite;
        animation: movingleftright2 25000ms linear infinite;
      }
      &:nth-child(3n) {
        top: 20%;
        left: 72%;
        -webkit-animation: movingleftright3 20000ms linear infinite;
        animation: movingleftright3 20000ms linear infinite;
      }
      &:nth-child(4n) {
        top: 18%;
        left: 90%;
        -webkit-animation: movingleftright2 30000ms linear infinite;
        animation: movingleftright2 30000ms linear infinite;
      }
      &:nth-child(5n) {
        bottom: 22%;
        top: auto;
        left: 10%;
        -webkit-animation: movingleftright1 20000ms linear infinite;
        animation: movingleftright1 20000ms linear infinite;
      }
      &:nth-child(6n) {
        bottom: 6%;
        top: auto;
        left: 48%;
        -webkit-animation: movingleftright3 15000ms linear infinite;
        animation: movingleftright3 15000ms linear infinite;
      }
      &:nth-child(7n) {
        bottom: 12%;
        top: auto;
        left: 80%;
        -webkit-animation: movingleftright2 25000ms linear infinite;
        animation: movingleftright2 25000ms linear infinite;
      }
    }
  }
}
/*------------------- 5.10 Why Choose Us -------------------*/
.why-choose-fluid {
  overflow: hidden;
  .why-choose-content {
    background-color: #615dfa;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 150px;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: calc(100% - 585px);
    position: relative;
    overflow: hidden;
    z-index: 1;
    &:after {
      content: url("../../media/figure/multi_shape.png");
      position: absolute;
      top: 0;
      right: 35px;
      text-align: center;
      -webkit-animation: movinground 50000ms linear infinite;
      animation: movinground 50000ms linear infinite;
      z-index: -1;
    }
  }
  .content-box {
    .item-title {
      color: #ffffff;
      margin-bottom: 15px;
    }
    p {
      color: #ffffff;
      margin-bottom: 30px;
    }
    .button-slide {
      background-color: #ffffff;
      border-color: #ffffff;
      box-shadow: 0 17px 21px 0 rgba(21, 17, 164, 0.3);
    }
  }
  .why-choose-img {
    .image-box {
      img {
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.why-choose-us {
  .why-choose-box {
    .item-subtitle {
      color: #615dfa;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .item-title {
      font-weight: 800;
      margin-bottom: 22px;
      span {
        display: block;
      }
    }
    p {
      color: #71728c;
      margin-bottom: 30px;
      width: 90%;
    }
    .button-slide {
      .btn-icon {
        margin-left: 10px;
      }
    }
    .features-list {
      position: relative;
      &:before {
        content: "";
        height: 90%;
        width: 50%;
        border: 9px solid #e1e1e1;
        border-radius: 50%;
        border-top: none;
        border-left: none;
        border-bottom: none;
        position: absolute;
        top: 50%;
        left: -23%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: -1;
      }
      li {
        &:last-child {
          margin-bottom: 0;
        }
        &:nth-child(even) {
          padding-left: 80px;
        }
      }
      .media {
        &:hover {
          .media-body {
            .item-title {
              color: #615dfa;
            }
          }
        }
      }
      .item-icon {
        font-size: 50px;
        color: #b3b3b3;
        height: 130px;
        width: 130px;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 31px 65px 0 rgba(153, 153, 153, 0.28);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-right: 25px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      .media-body {
        p {
          margin-bottom: 0;
        }
      }
    }
  }
}
/*------------------- 5.11 Login Page -------------------*/
.login-page-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  min-height: 100%;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  .content-wrap {
    .map-line {
      .map-marker {
        li {
          position: absolute;
          &:nth-child(1n) {
            bottom: 50px;
            right: 58%;
          }
          &:nth-child(2n) {
            top: 33%;
            right: 75%;
          }
          &:nth-child(3n) {
            top: 60%;
            right: 37%;
          }
          &:nth-child(4n) {
            top: 38%;
            right: 21%;
          }
          &:after {
            content: "";
            height: 6px;
            width: 33px;
            background-color: #403cd9;
            border-radius: 50%;
            position: absolute;
            top: 33px;
            left: -5px;
            -webkit-animation: pulse 1500ms infinite;
            animation: pulse 1500ms infinite;
          }
        }
      }
    }
  }
  .login-content {
    padding-top: 80px;
  }
  .item-logo {
    a {
      position: relative;
      &:before {
        content: "";
        height: 10px;
        width: 10px;
        background-color: #5edfff;
        position: absolute;
        top: 7px;
        left: 68px;
        border-radius: 50%;
        -webkit-animation: pulse2 linear 1000ms infinite;
        animation: pulse2 linear 1000ms infinite;
      }
    }
  }
  .login-form-wrap {
    padding-bottom: 50px;
    position: relative;
    padding-left: 52px;
    z-index: 1;
    font-family: "Nunito", sans-serif;
    position: relative;
    z-index: 1;
  }
  .nav-tabs {
    li {
      &:last-child {
        margin-right: 0;
      }
      .nav-link {
        &:hover {
          i {
            color: #ffffff;
          }
        }
        &.active {
          background-color: #5edfff;
          color: #ffffff;
          i {
            color: #ffffff;
          }
        }
      }
    }
  }
  .tab-content {
    min-width: 470px;
    background-color: #ffffff;
    border-radius: 0 15px 15px 15px;
    padding: 50px 60px;
    box-shadow: 0 19px 73px 0 rgba(0, 0, 0, 0.17);
    .item-title {
      &:before {
        content: "";
        height: 3px;
        width: 8px;
        background-color: #615dfa;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      &:after {
        content: "";
        height: 3px;
        width: 18px;
        background-color: #615dfa;
        border-radius: 4px;
        position: absolute;
        left: 10px;
        bottom: 0;
      }
    }
    .form-group {
      .form-control {
        border: none;
        border-radius: 0;
        padding: 5px 0;
        border-bottom: 1px solid #eaeaea;
      }
      input {
        &::-webkit-datetime-edit-text {
          color: #9f9f9f;
          padding: 0 0.3em;
        }
        &::-webkit-datetime-edit-month-field {
          color: #9f9f9f;
        }
        &::-webkit-datetime-edit-day-field {
          color: #9f9f9f;
        }
        &::-webkit-datetime-edit-year-field {
          color: #9f9f9f;
        }
        &::-webkit-inner-spin-button {
          display: none;
        }
      }
      .select2-container--classic {
        .select2-selection--single {
          height: 50px;
          border: none;
          border-bottom: 1px solid #eaeaea;
          .select2-selection__rendered {
            line-height: 50px;
            font-size: 16px;
            color: #9f9f9f;
            padding-left: 0;
          }
          .select2-selection__arrow {
            height: 50px;
          }
        }
      }
      .submit-btn {
        width: 100%;
        box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.17);
        padding: 13px 10px;
      }
    }
    .login-tab {
      .google-signin {
        text-align: center;
        position: relative;
        padding-bottom: 35px;
        margin-bottom: 5px;
        &:before {
          content: "or";
          font-size: 15px;
          color: #b6b6b6;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
        }
        a {
          border: 1px solid #e1e1e1;
          border-radius: 4px;
          padding: 12px;
          color: #646464;
          font-size: 15px;
          font-weight: 700;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          img {
            margin-right: 8px;
          }
        }
      }
      .form-group {
        .submit-btn {
          width: auto;
          padding: 12px 50px;
        }
      }
      .reset-password {
        margin-bottom: 10px;
        a {
          display: block;
          text-align: right;
          color: #ff3d00;
          font-size: 15px;
          font-weight: 600;
        }
      }
      .account-create {
        font-weight: 600;
        margin-top: 25px;
        a {
          color: #615dfa;
          text-decoration: underline;
          &:hover {
            color: #5edfff;
          }
        }
      }
    }
  }
}
.login-page-wrap .tab-content .form-group input.form-control::-webkit-input-placeholder,
      .login-page-wrap .tab-content .form-group textarea.form-control::-webkit-input-placeholder {
  color: #9f9f9f;
}
/*=======================================================================
6. Dashboard Style
=========================================================================*/
/*------------------- 6.1 Blocks -------------------*/
.block-box {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 20px;
}
/*------------------- 6.2 Banner -------------------*/
.newsfeed-banner {
  background-image: -webkit-linear-gradient(right, #ffea00, #ff9800);
  background-image: linear-gradient(to left, #ffea00, #ff9800);
  border-radius: 10px;
  padding: 60px 50px;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  z-index: 1;
  .item-icon {
    font-size: 80px;
    color: #ffffff;
    margin-right: 55px;
    position: relative;
  }
  .media-body {
    .item-title {
      font-size: 30px;
      color: #ffffff;
      font-weight: 800;
      margin-bottom: 8px;
    }
  }
  .animation-img {
    li {
      position: absolute;
      z-index: -1;
      &:nth-child(1n) {
        top: 0;
        right: 150px;
      }
      &:nth-child(2n) {
        top: auto;
        bottom: 0;
        right: 30px;
      }
    }
  }
}
.banner-user {
  .media {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    .item-img {
      position: relative;
      margin-right: 30px;
      border-radius: 50%;
      background-color: #ffffff;
      padding: 5px;
      display: inline-block;
      img {
        border-radius: 50%;
      }
    }
    .item-title {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 2px;
      position: relative;
      display: inline-block;
      &:before {
        content: "\eed6";
        font-family: IcoFont;
        text-align: center;
        display: inline-block;
        height: 26px;
        width: 26px;
        line-height: 26px;
        background-color: #17dd17;
        border-radius: 50%;
        font-size: 20px;
        color: #ffffff;
        position: absolute;
        top: 1px;
        right: -38px;
      }
    }
    .item-subtitle {
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .item-social {
      li {
        display: inline-block;
        margin-right: 2px;
        &:last-child {
          margin-right: 0;
        }
        a {
          text-align: center;
          font-size: 18px;
          color: #ffffff;
          height: 40px;
          width: 40px;
          line-height: 40px;
          border-radius: 50%;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .user-meta {
      position: absolute;
      bottom: 0;
      right: 0;
      li {
        &:last-child {
          margin-right: 0;
        }
        span {
          font-weight: 600;
          color: #ffffff;
        }
      }
    }
  }
}
.banner-forum {
  background-image: url("../../media/banner/banner_forum.jpg");
  .media {
    .media-body {
      .item-title {
        &:before {
          display: none;
        }
      }
      .item-subtitle {
        color: #c2c2c2;
      }
    }
  }
}
.banner-user-group {
  background-image: url("../../media/banner/banner_group.jpg");
  .media {
    .media-body {
      .item-title {
        &:before {
          display: none;
        }
      }
      .item-subtitle {
        color: #c2c2c2;
      }
    }
  }
}
/*------------------- 6.3 Forum -------------------*/
.forum-list-table {
  .table {
    background-color: #ffffff;
    border-radius: 8px;
    .thead-dark {
      th {
        background-color: #615dfa;
        border-color: #ffffff;
        border-top: none;
        border-bottom: none;
        padding: 16px;
        font-weight: 600;
        &:first-child {
          border-radius: 8px 0 0 0;
          border-left: none;
          padding-left: 25px;
        }
        &:last-child {
          border-radius: 0 8px 0 0;
          border-right: none;
          padding-left: 25px;
        }
      }
    }
    td {
      border-bottom: none;
      border-color: #e7edf6;
      vertical-align: middle;
      font-size: 14px;
      font-weight: 600;
      &:first-child {
        border-left: none;
        padding-left: 25px;
      }
      &:last-child {
        border-right: none;
        padding-left: 25px;
      }
    }
    .media {
      min-width: 220px;
      padding: 15px 0;
      .item-img {
        margin-right: 20px;
        margin-top: 5px;
        img {
          border-radius: 50%;
        }
      }
      .media-body {
        .item-title {
          font-size: 16px;
          margin-bottom: 6px;
          a {
            color: #000000;
            &:hover {
              color: #615dfa;
            }
          }
        }
        p {
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
    .forum-member {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      .item-img {
        margin-top: 0;
      }
      .media-body {
        .item-title {
          margin-bottom: 0;
          line-height: 22px;
          a {
            color: #444444;
          }
        }
        .item-time {
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
  }
}
.forum-post-input {
  .media {
    padding: 30px;
    .item-img {
      &:after {
        content: url("../../media/figure/chat_round_shape3.png");
        position: absolute;
        top: 0;
        left: 0;
      }
      img {
        border-radius: 50%;
      }
    }
    .media-body {
      .form-control {
        border: none;
        background-color: #f4f7fc;
        border-radius: 4px;
        padding: 20px 30px;
        font-size: 14px;
        &:focus {
          box-shadow: none;
        }
      }
    }
  }
  .post-footer {
    .insert-btn {
      a {
        margin-right: 5px !important;
      }
    }
  }
}
.forum-post-input .media .media-body input.form-control::-webkit-input-placeholder,
  .forum-post-input .media .media-body textarea.form-control::-webkit-input-placeholder {
  color: #afb8c4;
}
.forum-last-status {
  margin-bottom: 35px;
  .widget-heading {
    .widget-title {
      font-size: 24px;
    }
  }
  .forum-topic-status {
    p {
      margin-bottom: 0;
      font-size: 14px;
      color: #aeadad;
      a {
        &:hover {
          color: #615dfa;
        }
      }
      i {
        margin: 0 5px;
        text-align: center;
        display: inline-block;
        height: 18px;
        width: 18px;
        line-height: 18px;
        background-color: #17dd17;
        border-radius: 50%;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
  .subscribe-btn {
    .item-btn {
      display: block;
      color: #898989;
      font-weight: 600;
      text-align: center;
      padding: 16px 10px;
      border-radius: 8px;
      &:hover {
        background-color: #5edfff;
        color: #ffffff;
      }
    }
  }
  .post-view {
    .post-header {
      .media {
        .user-img {
          padding: 0;
          &:after {
            display: none;
          }
        }
      }
    }
    .post-body {
      p {
        background-color: #f5f7fa;
        padding: 20px 25px;
        border-radius: 4px;
        margin-bottom: 30px;
      }
    }
    .post-footer {
      border-top-color: #eff4fb;
      padding: 10px 30px;
      ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        li {
          font-size: 12px;
          color: #878787;
        }
      }
    }
  }
}
.forum-last-status .forum-topic-status p a,
      .forum-last-status .forum-topic-status p span {
  color: #797979;
  text-decoration: underline;
}
.forum-topic-add {
  .heading-title {
    font-size: 24px;
    color: #000000;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
    label {
      font-size: 14px;
      color: #c4c4c4;
    }
    .form-control {
      border-color: #e3e3e3;
    }
    .insert-btn {
      a {
        font-size: 14px;
        color: #949494;
        padding: 0 8px;
        margin-bottom: 4px;
        &:hover {
          color: #000000;
        }
      }
    }
    .submit-btn {
      margin-top: 10px;
      padding: 8px 32px;
    }
  }
}
.forum-info {
  padding: 20px 30px;
  .widget-heading {
    margin-bottom: 10px;
  }
  p {
    line-height: 24px;
  }
}
.user-list-view {
  &.forum-member {
    .widget-author {
      padding: 30px;
      .author-statistics {
        li {
          &:last-child {
            a {
              padding-right: 0;
            }
          }
        }
      }
    }
  }
  .row {
    & > [class^="col-"] {
      max-width: 100% !important;
      -webkit-box-flex: 100%;
      -ms-flex: 100%;
      -webkit-flex: 100%;
      flex: 100%;
    }
  }
  .widget-author {
    padding: 30px 80px 30px 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    .author-location {
      margin-bottom: 0;
    }
    .author-badge {
      margin-bottom: 0;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }
  .user-group {
    .author-statistics {
      li {
        &:after {
          display: none;
        }
      }
    }
  }
}
.forum-media-status {
  padding: 20px 30px 10px;
  li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
  a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    span {
      color: #9e9faf;
      font-weight: 600;
      margin-left: 8px;
    }
    i {
      margin-right: 12px;
      height: 30px;
      width: 30px;
      background-color: #5edfff;
      border-radius: 50%;
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      color: #ffffff;
    }
  }
}
.forum-media-gallery {
  padding: 25px 30px 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  .media-upload {
    .upload-btn {
      i {
        margin-right: 8px;
        font-weight: 400;
        font-size: 18px;
      }
      &:hover {
        background-color: #5edfff;
      }
    }
  }
  .input-group {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    .form-control {
      height: 50px;
      border: 1px solid #d5dae0;
      font-size: 16px;
    }
    .input-group-append {
      .search-btn {
        padding: 5px 16px;
        font-size: 20px;
      }
    }
  }
}
/*------------------- 6.4 Post -------------------*/
.post-input-tab {
  .nav-tabs {
    border-color: #e6e9ec;
    .nav-item {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 33.333333%;
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      position: relative;
      width: 100%;
      border-right: 1px solid #e6e9ec;
      margin-bottom: 0;
      &:last-child {
        border-right: none;
      }
    }
    .nav-link {
      padding: 16px 10px;
      background-color: transparent;
      border: none;
      font-weight: 600;
      color: #98a4b4;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: relative;
      &.active {
        color: #000000;
        &:after {
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
  .tab-pane {
    .form-control {
      border: none;
      padding: 16px 30px;
      &:focus {
        outline: none;
        box-shadow: none;
      }
    }
  }
  .post-media {
    text-align: center;
    padding: 30px 0;
    label {
      display: block;
      font-size: 24px;
      margin-bottom: 20px;
      font-weight: 600;
      color: #000000;
    }
    .media-insert {
      font-weight: 700;
      color: #ffffff;
      background-color: #a9b5c7;
      border-radius: 4px;
      padding: 10px 32px;
      i {
        font-size: 20px;
        margin-right: 10px;
      }
      &:hover {
        background-color: #615dfa;
      }
    }
  }
  .post-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px solid #eaedf1;
    padding: 18px 20px 18px 30px;
    .insert-btn {
      a {
        &:first-child {
          padding-left: 0;
        }
        &:hover {
          color: #615dfa;
        }
      }
    }
    .submit-btn {
      a {
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
        background-color: #615dfa;
        border-radius: 4px;
        padding: 8px 32px;
      }
    }
  }
}
.post-input-tab .tab-pane input.form-control::-webkit-input-placeholder,
.post-input-tab .tab-pane textarea.form-control::-webkit-input-placeholder {
  color: #afb8c4;
  font-size: 14px;
}
.post-view {
  .post-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 30px 30px 18px;
    .media {
      .user-img {
        img {
          border-radius: 50%;
        }
      }
      .user-title {
        font-weight: 600;
        color: #71728c;
        line-height: 25px;
        a {
          &:hover {
            color: #615dfa;
          }
        }
        i {
          margin: 0 4px;
          text-align: center;
          display: inline-block;
          height: 21px;
          width: 21px;
          line-height: 21px;
          background-color: #17dd17;
          border-radius: 50%;
          font-size: 17px;
          color: #ffffff;
        }
      }
      .entry-meta {
        line-height: 25px;
        li {
          display: inline-block;
          color: #9e9faf;
          font-size: 12px;
          position: relative;
          &:last-child {
            &:after {
              display: none;
            }
          }
          i {
            font-size: 14px;
            margin-right: 6px;
          }
        }
      }
    }
    .dropdown {
      &.show {
        .dropdown-toggle {
          color: #ffffff;
          &:before {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
          }
        }
      }
    }
    .dropdown-toggle {
      background-color: transparent;
      padding-right: 0;
      border: none;
      font-size: 34px;
      color: #bbc5d3;
      margin-top: -15px;
      line-height: 1;
      position: relative;
      z-index: 1;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      &:hover {
        color: #ffffff;
        &:before {
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
        }
      }
    }
    .dropdown-menu {
      border: none;
      box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
      min-width: 130px;
      margin-top: 15px;
      .dropdown-item {
        font-size: 13px;
        padding: 10px 20px;
        &:hover {
          background-color: #5edfff;
          color: #ffffff;
        }
      }
    }
  }
  .post-body {
    padding: 0 30px;
    p {
      i {
        font-size: 16px;
        margin-left: 5px;
        color: #ff5722;
      }
    }
    .post-img {
      img {
        border-radius: 3px;
      }
    }
    .post-meta-wrap {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 16px 0 18px;
      .post-meta {
        .meta-text {
          display: inline-block;
          font-size: 14px;
          font-weight: 600;
          color: #71728c;
          margin-left: 12px;
          & + .meta-text {
            &:before {
              content: ".";
              padding: 0 18px 0 2px;
            }
          }
        }
      }
      .post-reaction {
        img {
          cursor: pointer;
          border: 2px solid #ffffff;
          border-radius: 50%;
          margin-right: -10px;
          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.18);
        }
      }
    }
    .post-friends-view {
      padding: 12px 0 35px;
      p {
        margin-bottom: 10px;
      }
      .profile-thumb {
        border: 1px solid #ebebeb;
        border-radius: 3px;
      }
      .cover-img {
        img {
          border-radius: 3px 3px 0 0;
        }
      }
      .media {
        padding-bottom: 20px;
        padding-left: 25px;
        .media-body {
          padding-top: 18px;
        }
      }
      .profile-img {
        margin-top: -46px;
        margin-right: 18px;
        img {
          border-radius: 50%;
          border: 8px solid #ffffff;
        }
      }
      .profile-name {
        font-weight: 700;
        line-height: 22px;
        a {
          color: #111111;
          &:hover {
            color: #615dfa;
          }
        }
      }
      .user-name {
        line-height: 22px;
        font-size: 14px;
        color: #aeacac;
      }
    }
    .post-img-list {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-left: -4px;
      margin-right: -4px;
      li {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        position: relative;
        width: 100%;
        padding-right: 4px;
        padding-left: 4px;
        margin-bottom: 8px;
        a {
          border-radius: 6px;
          display: block;
          position: relative;
          text-align: center;
        }
        img {
          border-radius: 6px;
        }
        &:nth-child(4n) {
          -webkit-box-flex: 0;
          -webkit-flex: 0 0 66.666667%;
          -ms-flex: 0 0 66.666667%;
          flex: 0 0 66.666667%;
          max-width: 66.666667%;
        }
        &:last-child {
          a {
            &:before {
              content: "";
              height: 100%;
              width: 100%;
              background-color: rgba(97, 93, 250, 0.9);
              border-radius: 6px;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
            }
            &:after {
              content: attr(data-photo);
              font-size: 36px;
              color: #ffffff;
              position: absolute;
              top: 50%;
              left: 0;
              right: 0;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%);
              z-index: 2;
            }
          }
        }
      }
    }
    .post-video {
      img {
        border-radius: 3px;
      }
      &:before {
        content: "";
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.55);
        border-radius: 3px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }
      .video-btn {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 2;
        height: 70px;
        width: 70px;
        line-height: 60px;
        font-size: 24px;
        color: #ffffff;
        background-color: #615dfa;
        border: 5px solid #ffffff;
        border-radius: 50%;
        margin: 0 auto;
        &:hover {
          background-color: #5edfff;
        }
      }
    }
    .post-no-thumbnail {
      border-bottom: 1px solid #e6e9ec;
      padding-bottom: 28px;
      p {
        margin-bottom: 14px;
      }
    }
  }
  .post-footer {
    padding: 3px 30px;
    border-top: 1px solid #e6e9ec;
    & > ul {
      & > li {
        & > a {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          font-size: 14px;
          color: #b1b6bc;
          font-weight: 600;
          padding: 15px 0;
          i {
            font-size: 18px;
            color: #71728c;
            margin-right: 14px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
          &:hover {
            i {
              color: #5edfff;
            }
          }
        }
      }
    }
    .post-react {
      .react-list {
        position: absolute;
        top: -40px;
        left: 0;
        background-color: #ffffff;
        border-radius: 30px;
        padding: 7px 15px 8px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
        visibility: hidden;
        opacity: 0;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        li {
          display: inline-block;
          margin-right: 4px;
          opacity: 0;
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          a {
            img {
              border-radius: 50%;
              border: 4px solid #ffffff;
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
            }
          }
        }
      }
      &:hover {
        .react-list {
          visibility: visible;
          opacity: 1;
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          li {
            opacity: 1;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            &:nth-child(1n) {
              -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s;
            }
            &:nth-child(2n) {
              -webkit-transition-delay: 0.15s;
              transition-delay: 0.15s;
            }
            &:nth-child(3n) {
              -webkit-transition-delay: 0.2s;
              transition-delay: 0.2s;
            }
            &:nth-child(4n) {
              -webkit-transition-delay: 0.25s;
              transition-delay: 0.25s;
            }
            &:nth-child(5n) {
              -webkit-transition-delay: 0.3s;
              transition-delay: 0.3s;
            }
            &:nth-child(6n) {
              -webkit-transition-delay: 0.35s;
              transition-delay: 0.35s;
            }
            &:nth-child(7n) {
              -webkit-transition-delay: 0.4s;
              transition-delay: 0.4s;
            }
          }
        }
      }
    }
    .post-share {
      position: relative;
      .share-list {
        position: absolute;
        top: -40px;
        left: 0;
        background-color: #ffffff;
        border-radius: 20px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
        padding: 0 15px;
        visibility: visible;
        opacity: 1;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        li {
          a {
            text-align: center;
            font-size: 18px;
            padding: 8px 8px 5px;
            position: relative;
            z-index: 1;
            &:before {
              content: "";
              height: 35px;
              width: 35px;
              background-color: #5edfff;
              border-radius: 50%;
              position: absolute;
              top: 4px;
              left: -1px;
              z-index: -1;
              -webkit-transform: scale(0);
              -ms-transform: scale(0);
              transform: scale(0);
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
            }
            &:hover {
              color: #ffffff;
              &:before {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
              }
            }
          }
        }
      }
      &:hover {
        .share-list {
          visibility: visible;
          opacity: 1;
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          li {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
            &:nth-child(2n) {
              -webkit-transition-delay: 0.3s;
              transition-delay: 0.3s;
            }
            &:nth-child(3n) {
              -webkit-transition-delay: 0.4s;
              transition-delay: 0.4s;
            }
            &:nth-child(4n) {
              -webkit-transition-delay: 0.5s;
              transition-delay: 0.5s;
            }
            &:nth-child(5n) {
              -webkit-transition-delay: 0.6s;
              transition-delay: 0.6s;
            }
          }
        }
      }
    }
  }
  .post-comment {
    border-top: 1px solid #e6e9ec;
    .comment-list {
      border-bottom: 1px solid #e6e9ec;
      padding: 0 30px 0 50px;
    }
    .main-comments {
      &:last-child {
        border-bottom: none;
      }
    }
    .post-header {
      padding-left: 0;
      padding-right: 0;
      .media {
        .user-img {
          &:after {
            content: url("../../media/figure/chat_round_shape3.png");
            top: 1px;
            left: 1px;
          }
        }
      }
    }
    .post-body {
      padding-left: 0;
      padding-right: 0;
      p {
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .post-footer {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 10px;
      border-top: none;
      ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
      li {
        margin-right: 30px;
      }
      .react-icon {
        img {
          cursor: pointer;
          border: 2px solid #ffffff;
          border-radius: 50%;
          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.18);
          margin-right: -10px;
        }
      }
    }
    .load-more-btn {
      .item-btn {
        font-size: 14px;
        font-weight: 700;
        color: #71728c;
        border-radius: 0;
        padding: 16px 10px;
        span {
          color: #615dfa;
          margin-left: 5px;
          display: inline-block;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
        &:hover {
          color: #ffffff;
          span {
            color: #ffffff;
          }
        }
      }
    }
    .comment-reply {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 10px 30px;
      .user-img {
        &:after {
          content: url("../../media/figure/chat_round_shape3.png");
          position: absolute;
          top: 1px;
          left: 1px;
        }
        img {
          border-radius: 50%;
        }
      }
      .input-box {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        .form-control {
          border: 1px solid #e6e9ec;
          padding: 10px 20px;
          color: #111111;
          font-size: 14px;
          height: 54px;
          border-radius: 8px;
          &:focus {
            outline: none;
            box-shadow: none;
          }
        }
      }
    }
    .children {
      padding-left: 30px;
      border-top: 1px solid #e6e9ec;
    }
  }
}
.post-view .post-comment .comment-reply .input-box input.form-control::-webkit-input-placeholder,
      .post-view .post-comment .comment-reply .input-box textarea.form-control::-webkit-input-placeholder {
  color: #b1b6bc;
}
.load-more-btn {
  .item-btn {
    &:hover {
      i {
        color: #ffffff;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
      }
    }
  }
}
/*------------------- 6.5 Product -------------------*/
.product-page {
  .block-box {
    margin-bottom: 30px;
  }
  .load-more-btn {
    margin-bottom: 80px;
  }
}
.product-breadcrumb {
  padding: 130px 0;
  background-image: url("../../media/figure/product_breadcrum.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  .breadcrumb-area {
    h1 {
      font-size: 24px;
      color: #ffffff;
      margin-bottom: 0;
    }
    ul {
      li {
        display: inline-block;
        color: #ffffff;
        &:last-child {
          &:after {
            display: none;
          }
        }
        &:after {
          content: "/";
          padding: 0 2px;
        }
        a {
          font-weight: 600;
          color: #decff6;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:hover {
            color: #5edfff;
          }
        }
      }
    }
  }
}
.product-filter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px 25px;
  .select-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .filter-btn {
    .item-btn {
      &:hover {
        background-color: #5edfff;
      }
    }
  }
}
.product-box {
  padding: 30px 40px 22px;
  .product-img {
    text-align: center;
    margin-bottom: 45px;
    a {
      display: block;
      img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
  }
  .product-content {
    position: relative;
    .item-category {
      margin-bottom: 4px;
      a {
        font-size: 12px;
        color: #828282;
        letter-spacing: 2px;
        font-weight: 600;
        &:hover {
          color: #615dfa;
        }
      }
    }
    .product-title {
      font-size: 18px;
      a {
        color: #000000;
        &:hover {
          color: #615dfa;
        }
      }
    }
    .product-price {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 18px;
      font-weight: 700;
      color: #615dfa;
    }
  }
  &:hover {
    .product-img {
      a {
        img {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
        }
      }
    }
  }
}
.single-product {
  margin-top: 40px;
  margin-bottom: 45px;
  .product-gallery {
    .tab-content {
      a {
        cursor: move;
        display: block;
        background-color: #ffffff;
        border-radius: 8px;
        text-align: center;
        margin-bottom: 10px;
        img {
          border-radius: 8px;
        }
      }
    }
    .nav-tabs {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -5px;
      margin-left: -5px;
      border-bottom: none;
      .nav-item {
        max-width: 25%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        a {
          display: block;
          border-radius: 6px;
          background-color: #ffffff;
          text-align: center;
          padding: 12px 10px;
          img {
            opacity: 0.2;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
          &.active {
            img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .product-content {
    .item-category {
      font-size: 12px;
      color: #828282;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .item-title {
      font-size: 24px;
      margin-bottom: 15px;
    }
    .item-price {
      font-size: 24px;
      font-weight: 700;
      color: #615dfa;
      margin-bottom: 20px;
    }
    .entry-meta {
      margin-bottom: 25px;
      & > li {
        display: block;
        color: #000000;
        font-weight: 700;
        span {
          color: #71728c;
          font-weight: 600;
        }
        a {
          color: #71728c;
          font-weight: 600;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          &:hover {
            color: #615dfa;
          }
        }
      }
    }
    p {
      font-size: 14px;
      color: #71728c;
      line-height: 26px;
    }
    .action-area {
      margin-top: 110px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      li {
        .input-group {
          background-color: transparent;
          .form-control {
            text-align: center;
            padding: 5px;
            height: 46px;
            width: 70px;
            display: block;
            outline: none;
            color: #71728c;
            background-color: #ffffff;
            font-size: 16px;
            border: none;
            margin: 0 4px;
            border-radius: 4px;
            &:focus {
              box-shadow: none;
            }
          }
          .quantity-btn {
            padding: 5px;
            height: 46px;
            width: 50px;
            font-size: 14px;
            line-height: 1;
            color: #5edfff;
            background-color: #ffffff;
            background-image: none;
            border-radius: 4px;
            outline: none;
            border: none;
            cursor: pointer;
          }
        }
        .cart-btn {
          background-color: #615dfa;
          border-radius: 4px;
          padding: 9px 30px;
          display: block;
          color: #ffffff;
          font-weight: 700;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          text-align: center;
          &:hover {
            background-color: #5edfff;
          }
        }
      }
    }
  }
}
.single-product-info {
  background-color: #ffffff;
  padding: 30px 35px;
  border-radius: 8px;
  margin-bottom: 45px;
  .nav-tabs {
    .nav-item {
      a {
        &.active {
          color: #000000;
          &:after {
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
  }
  .tab-content {
    .product-description {
      p {
        font-size: 14px;
        color: #71728c;
      }
    }
    .additional-info {
      li {
        font-size: 18px;
        color: #000000;
        margin-bottom: 5px;
      }
    }
    .product-review {
      margin-bottom: 40px;
      .media {
        position: relative;
        border-bottom: 1px solid #e7e7e7;
        margin-bottom: 25px;
        padding-bottom: 20px;
        .item-img {
          margin-top: 5px;
          margin-right: 20px;
        }
        .media-body {
          .item-date {
            font-size: 14px;
            font-weight: 600;
            color: #615dfa;
          }
          .author-name {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            .item-title {
              font-size: 18px;
              margin-bottom: 6px;
            }
            .item-rating {
              margin-left: 10px;
              i {
                font-size: 14px;
                color: #f7b035;
              }
            }
          }
          p {
            width: 90%;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
.related-product {
  .heading-title {
    font-size: 24px;
    margin-bottom: 26px;
  }
}
/*------------------- 6.6 Search -------------------*/
.newsfeed-search {
  background-color: #ffffff;
  border-radius: 6px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 30px;
  ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .active-member {
    padding-left: 20px;
    a {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      .member-count {
        margin-left: 5px;
        font-weight: 700;
        color: #000000;
      }
    }
  }
  .search-list {
    li {
      border-left: 1px solid #e4e9f0;
      position: relative;
      .drop-btn {
        padding: 21px 25px;
        font-size: 20px;
        color: #7d8693;
        font-weight: 700;
        border: none;
        background-color: transparent;
      }
      .drop-menu {
        position: absolute;
        top: 100%;
        right: -71px;
        visibility: hidden;
        opacity: 0;
        background-color: #f8f8f8;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 4px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        z-index: 11;
      }
    }
    .search-input {
      .drop-menu {
        right: 0;
      }
      .input-group {
        min-width: 250px;
      }
    }
  }
}
.user-search-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 22px 25px;
  margin-bottom: 30px;
  .box-item {
    .item-show-title {
      font-size: 14px;
      font-weight: 700;
      color: #000000;
    }
  }
  .search-box {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .input-group {
    .form-control {
      border: 1px solid #e1e1e1;
      border-radius: 5px 0 0 5px;
      height: 46px;
      font-size: 14px;
    }
    .search-btn {
      font-size: 18px;
      padding: 8px 18px;
      background-color: #5edfff;
      &:hover {
        background-color: #615dfa;
      }
    }
  }
  .dropdown {
    label {
      font-size: 14px;
      color: #9e9faf;
      margin-bottom: 0;
      font-weight: 600;
    }
    .dropdown-toggle {
      font-size: 14px;
      font-weight: 600;
      border: none;
      background-color: transparent;
      &:after {
        border: none;
        content: "\ea99";
        font-family: IcoFont;
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        vertical-align: middle;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
    .dropdown-menu {
      border: none;
      box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
      top: 0 !important;
      .dropdown-item {
        font-size: 14px;
        padding: 5px 20px;
        &:hover {
          background-color: #5edfff;
          color: #ffffff;
        }
      }
    }
    &.show {
      .dropdown-toggle {
        &:after {
          -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          transform: rotate(180deg);
        }
      }
    }
  }
  .user-view-switcher {
    li {
      display: inline-block;
      .user-view-trigger {
        font-size: 24px;
        color: #646464;
        padding: 7px;
      }
      &:last-child {
        a {
          padding-right: 0;
        }
      }
      &.active {
        a {
          color: #615dfa;
        }
      }
    }
  }
}
/*------------------- 6.7 User Activity -------------------*/
.user-top-header {
  margin-bottom: 30px;
  .menu-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 3px solid #d8e1ef;
    border-radius: 0 0 8px 8px;
    li {
      display: inline-block;
      position: relative;
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 10.5%;
      -ms-flex: 0 0 10.5%;
      flex: 0 0 10.5%;
      max-width: 10.5%;
      width: 100%;
      text-align: center;
      border-right: 1px solid #e4e9f1;
      &:nth-child(-n {
        & + 3) {
          display: block;
        }
      }
      &:last-child {
        border-right: none;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 5.5%;
        -ms-flex: 0 0 5.5%;
        flex: 0 0 5.5%;
        max-width: 5.5%;
        display: block;
        &:after {
          border-radius: 0 0 8px 0;
        }
      }
      &:first-child {
        &:after {
          border-radius: 0 0 0 8px;
        }
      }
      a {
        font-size: 14px;
        color: #9e9faf;
        font-weight: 700;
        padding: 20px;
        width: 100%;
      }
      &.active {
        &:after {
          visibility: visible;
          opacity: 1;
        }
        a {
          font-weight: 700;
          color: #000000;
        }
      }
    }
    .dropdown {
      height: 100%;
      .dropdown-toggle {
        &:before {
          content: "";
          height: 40px;
          width: 40px;
          background-color: #5edfff;
          border-radius: 50%;
          position: absolute;
          top: 23px;
          left: -2px;
          z-index: -1;
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
        &:hover {
          color: #ffffff;
          &:before {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
          }
        }
      }
      .dropdown-menu {
        top: 6px !important;
        left: 15px !important;
        border: none;
        box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
        .dropdown-item {
          font-size: 13px;
          padding: 5px 20px;
          &:hover {
            background-color: #5edfff;
            color: #ffffff;
          }
        }
      }
      &.show {
        .dropdown-toggle {
          color: #ffffff;
          &:before {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
          }
        }
      }
    }
  }
}
.user-timeline-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 30px;
  .menu-list {
    li {
      a {
        &:hover {
          color: #000000;
        }
        &.active {
          color: #000000;
          &:before {
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
  }
  .header-dropdown {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    &:last-child {
      margin-bottom: 0;
    }
    .dropdown-menu {
      border: none;
      box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
      top: 15px !important;
      .dropdown-item {
        font-size: 14px;
        color: #000000;
        &:hover {
          background-color: #5edfff;
          color: #ffffff;
        }
      }
    }
  }
}
.user-about {
  padding: 26px 30px;
  .widget-heading {
    margin-bottom: 10px;
  }
  .user-info {
    li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-size: 14px;
      border-bottom: 1px solid #e6ebf2;
      margin-bottom: 12px;
      padding-bottom: 2px;
      label {
        min-width: 240px;
        margin-right: 10px;
        color: #71728c;
      }
      a {
        &:hover {
          color: #615dfa;
        }
      }
    }
  }
}
#user-view {
  .widget-author {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 20px;
    .author-name {
      line-height: 20px;
    }
  }
}
.user-group {
  .member-thumb {
    margin-bottom: 40px;
    margin-left: -20px;
    padding-left: 20px;
    li {
      display: inline-block;
      margin-right: -20px;
      cursor: pointer;
      border: 2px solid #ffffff;
      border-radius: 50%;
      img {
        border-radius: 50%;
        height: 35px;
        width: 35px;
      }
      &:last-child {
        text-align: center;
        height: 37px;
        width: 37px;
        line-height: 32px;
        background-color: #5edfff;
        color: #ffffff;
        font-size: 10px;
      }
    }
  }
}
.user-group-photo {
  margin-bottom: 20px;
  a {
    border-radius: 4px;
    img {
      border-radius: 4px;
    }
  }
}
.user-video {
  position: relative;
  border-radius: 4px;
  margin-bottom: 20px;
  img {
    border-radius: 4px;
  }
  .video-btn {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    .play-icon {
      height: 50px;
      width: 50px;
      line-height: 46px;
      background-color: #615dfa;
      border: 2px solid #ffffff;
      border-radius: 50%;
      color: #ffffff;
      font-size: 18px;
      &:hover {
        background-color: #5edfff;
      }
    }
  }
  &:before {
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.user-badges {
  text-align: center;
  padding: 40px 0 40px;
  overflow: hidden;
  margin-bottom: 20px;
  .item-badge {
    margin-bottom: 30px;
  }
  .badge-icon {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 28px;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 11px 16px 0 rgba(0, 0, 0, 0.25);
    &:before {
      content: "";
      height: 6px;
      width: 20px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      position: absolute;
      top: 7px;
      right: 10px;
      -webkit-transform: rotate(28deg);
      -ms-transform: rotate(28deg);
      transform: rotate(28deg);
    }
  }
  p {
    padding: 0 30px;
    color: #9e9faf;
    font-size: 14px;
    line-height: 24px;
  }
  .badge-title {
    font-weight: 800;
    margin-bottom: 8px;
  }
  .badge-earn {
    margin-top: 26px;
    .item-text {
      font-size: 14px;
      font-weight: 600;
      color: #000000;
      margin-bottom: 10px;
    }
    .member-thumb {
      margin-left: -20px;
      position: relative;
      z-index: 1;
      li {
        display: inline-block;
        margin-right: -20px;
        cursor: pointer;
        border: 2px solid #ffffff;
        border-radius: 50%;
        img {
          border-radius: 50%;
          height: 30px;
          width: 30px;
        }
      }
      &:before {
        content: "";
        height: 1px;
        width: 100%;
        background-color: #e7ebf1;
        position: absolute;
        bottom: 17px;
        left: 0;
        right: 0;
        z-index: -1;
      }
    }
  }
}
.user-blog {
  .blog-img {
    a {
      display: block;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
      img {
        border-radius: 8px 8px 0 0;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        width: 100%;
      }
    }
  }
  .blog-content {
    padding: 30px 30px 15px;
    .blog-category {
      a {
        font-size: 13px;
        color: #ffffff;
        background-color: #5edfff;
        padding: 0 15px;
        border-radius: 2px;
        margin-right: 2px;
        margin-bottom: 14px;
        &:hover {
          background-color: #615dfa;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .blog-title {
      font-size: 22px;
      margin-bottom: 12px;
      a {
        color: #000000;
        &:hover {
          color: #615dfa;
        }
      }
    }
    .blog-date {
      font-size: 14px;
      font-weight: 600;
      color: #8c8c8c;
      margin-bottom: 10px;
      i {
        font-size: 16px;
        color: #615dfa;
        margin-right: 4px;
      }
    }
  }
  .blog-meta {
    padding: 23px 30px;
    border-top: 1px solid #e5e9ee;
    ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      li {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 14px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        i {
          color: #615dfa;
          font-size: 18px;
          margin-right: 8px;
        }
      }
    }
    .blog-reaction {
      img {
        cursor: pointer;
        border: 2px solid #ffffff;
        border-radius: 50%;
        margin-right: -10px;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.18);
        &:last-child {
          margin-right: 0;
        }
      }
      .meta-text {
        margin-left: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #71728c;
      }
    }
  }
  &:hover {
    .blog-img {
      img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
      }
    }
  }
}
.load-more-post {
  text-align: center;
  margin-bottom: 80px;
  margin-top: 60px;
  .item-btn {
    i {
      font-size: 18px;
      margin-right: 10px;
      color: #615dfa;
      font-weight: 700;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
    &:hover {
      background-color: #5edfff;
      color: #ffffff;
      i {
        color: #ffffff;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
      }
    }
  }
}
.user-single-blog {
  margin-bottom: 30px;
  .blog-thumbnail {
    img {
      border-radius: 8px 8px 0 0;
    }
  }
  .blog-content-wrap {
    padding: 40px 70px 65px;
  }
  .blog-entry-header {
    .entry-category {
      a {
        background-color: #5edfff;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        padding: 0 12px;
        border-radius: 2px;
        margin-right: 2px;
        margin-bottom: 14px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .entry-title {
      margin-bottom: 14px;
    }
    .entry-meta {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      li {
        i {
          color: #615dfa;
          font-size: 16px;
          margin-right: 8px;
        }
        a {
          margin-left: 2px;
          color: #444444;
          &:hover {
            color: #615dfa;
          }
        }
      }
    }
    .blog-share {
      text-align: right;
      li {
        a {
          text-align: center;
          height: 36px;
          width: 36px;
          line-height: 36px;
          border-radius: 50%;
          font-size: 18px;
          color: #ffffff;
        }
      }
    }
  }
  .blog-content {
    margin-bottom: 55px;
    blockquote {
      position: relative;
      margin: 34px 30px;
      p {
        font-size: 18px;
        font-weight: 700;
        font-style: italic;
        color: #444444;
        padding-left: 20px;
      }
    }
    .content-img {
      img {
        border-radius: 8px;
      }
    }
    .item-title {
      font-size: 30px;
      margin-top: 35px;
    }
  }
  .blog-footer {
    .item-label {
      font-size: 14px;
      color: #71728c;
      font-weight: 600;
      margin-bottom: 4px;
      span {
        color: #000000;
      }
    }
    .reaction-icon {
      img {
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.18);
      }
    }
  }
  .blog-comment-form {
    .item-title {
      font-size: 30px;
      margin-bottom: 30px;
    }
    .submit-btn {
      font-size: 16px;
      padding: 11px 32px;
    }
  }
}
.user-single-blog .blog-comment-form input.form-control::-webkit-input-placeholder,
  .user-single-blog .blog-comment-form textarea.form-control::-webkit-input-placeholder {
  color: #9d9d9d;
}
.realated-blog {
  .blog-heading {
    margin-bottom: 30px;
    padding: 16px 25px;
    .heading-title {
      font-size: 16px;
      margin-bottom: 0;
    }
  }
}
/*------------------- 6.8 Widget -------------------*/
.widget {
  margin-bottom: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px 30px 35px;
  .see-all-btn {
    padding: 35px 0 0;
    .item-btn {
      text-align: center;
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      border-radius: 3px;
      background-color: #5edfff;
      padding: 10px 20px;
      &:hover {
        background-color: #615dfa;
      }
    }
  }
}
.widget-heading {
  .widget-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    position: relative;
    padding-bottom: 15px;
    &:before {
      content: "";
      height: 3px;
      width: 8px;
      background-color: #615dfa;
      border-radius: 4px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    &:after {
      content: "";
      height: 3px;
      width: 18px;
      background-color: #615dfa;
      border-radius: 4px;
      position: absolute;
      left: 10px;
      bottom: 0;
    }
  }
  .dropdown {
    line-height: 1;
    &.show {
      .dropdown-toggle {
        color: #ffffff;
        &:before {
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
        }
      }
    }
  }
  .dropdown-toggle {
    background-color: transparent;
    border: none;
    font-size: 34px;
    color: #bbc5d3;
    line-height: 1;
    margin-top: -16px;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:before {
      content: "";
      height: 40px;
      width: 40px;
      background-color: #5edfff;
      border-radius: 50%;
      position: absolute;
      top: 7px;
      left: -2px;
      z-index: -1;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    &:after {
      display: none;
    }
    &:hover {
      color: #ffffff;
      &:before {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
    }
  }
  .dropdown-menu {
    min-width: 130px;
    border: none;
    box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    .dropdown-item {
      font-size: 13px;
      padding: 10px 20px;
      &:hover {
        background-color: #5edfff;
        color: #ffffff;
      }
    }
  }
}
.widget-author {
  text-align: center;
  padding: 40px 15px 30px;
  position: relative;
  .cover-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    img {
      border-radius: 8px 8px 0 0;
      width: 100%;
      height: 100px;
    }
  }
  .profile-img {
    margin-bottom: 26px;
    a {
      border-radius: 50%;
      position: relative;
      img {
        box-shadow: 0 6px 21px 0 rgba(0, 0, 0, 0.12);
        background-color: #ffffff;
        padding: 5px;
        border-radius: 50%;
      }
      &:before {
        content: url("../../media/figure/chat_round_shape5.png");
        position: absolute;
        top: -8px;
        left: -8px;
      }
      &:after {
        content: "\eed8";
        font-family: IcoFont;
        font-size: 20px;
        color: #ffffff;
        height: 30px;
        width: 30px;
        line-height: 30px;
        background-color: #17dd17;
        border-radius: 50%;
        position: absolute;
        bottom: -9px;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }
  .author-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    a {
      color: #000000;
      &:hover {
        color: #615dfa;
      }
    }
  }
  .author-location {
    font-size: 14px;
    color: #9e9faf;
    margin-bottom: 24px;
  }
  .author-badge {
    margin-bottom: 45px;
    li {
      display: inline-block;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    a {
      font-size: 20px;
      color: #ffffff;
      height: 44px;
      width: 44px;
      line-height: 44px;
      border-radius: 50%;
      position: relative;
      &:before {
        content: "";
        height: 5px;
        width: 15px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: absolute;
        top: 4px;
        right: 8px;
        -webkit-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
        transform: rotate(25deg);
      }
    }
    .profile-circle {
      background-color: #e7ecf4;
      font-size: 16px;
      font-weight: 700;
      color: #8f8f8f;
    }
  }
  .author-statistics {
    li {
      display: inline-block;
      position: relative;
      line-height: 1;
      &:after {
        content: "";
        height: 31px;
        width: 1px;
        background-color: #e8e8e8;
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      &:last-child {
        margin-right: 0;
        &:after {
          display: none;
        }
      }
      a {
        text-align: center;
        padding: 0 15px 0 12px;
      }
    }
    .item-number {
      font-weight: 700;
      color: #000000;
      display: block;
      margin-bottom: 5px;
    }
    .item-text {
      font-weight: 600;
      color: #9e9faf;
      font-size: 12px;
    }
  }
}
.widget-memebers {
  .nav-tabs {
    border-bottom: none;
    margin-bottom: 26px;
    .nav-item {
      margin-right: 10px;
      margin-bottom: 0;
    }
    .nav-link {
      border: 1px solid #e5e5e5;
      font-size: 12px;
      font-weight: 700;
      background-color: transparent;
      color: #646464;
      border-radius: 4px;
      padding: 0 10px;
      &:hover {
        border-color: #5edfff;
        background-color: #5edfff;
        color: #ffffff;
      }
      &.active {
        border-color: #5edfff;
        background-color: #5edfff;
        color: #ffffff;
      }
    }
  }
  .media {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 32px;
    &:last-child {
      margin-bottom: 0;
    }
    .item-img {
      margin-right: 18px;
      position: relative;
      a {
        img {
          border-radius: 50%;
        }
        &:before {
          content: url("../../media/figure/chat_round_shape.png");
          position: absolute;
          top: -5px;
          left: -5px;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
        &:after {
          content: url("../../media/figure/chat_round_shape2.png");
          position: absolute;
          top: -5px;
          left: -5px;
          -webkit-transform: rotate(30deg);
          -ms-transform: rotate(30deg);
          transform: rotate(30deg);
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
      }
    }
    .media-body {
      position: relative;
    }
    .item-title {
      font-size: 14px;
      margin-bottom: 10px;
      line-height: 1;
      a {
        color: #000000;
        &:hover {
          color: #615dfa;
        }
      }
    }
    .item-username {
      font-size: 12px;
      color: #9e9faf;
      line-height: 1;
    }
    .member-status {
      text-align: center;
      position: absolute;
      top: 3px;
      right: 0;
      height: 21px;
      width: 21px;
      line-height: 21px;
      border-radius: 50%;
      color: #ffffff;
      font-size: 17px;
      &.online {
        background-color: #17dd17;
      }
      &.offline {
        background-color: #dde2e9;
      }
    }
    &:hover {
      .item-img {
        a {
          &:before {
            visibility: hidden;
            opacity: 0;
          }
          &:after {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
  }
}
.widget-groups {
  .nav-tabs {
    border-bottom: none;
    margin-bottom: 25px;
    .nav-item {
      margin-right: 10px;
      margin-bottom: 0;
    }
    .nav-link {
      border: 1px solid #e5e5e5;
      font-size: 12px;
      font-weight: 700;
      background-color: transparent;
      color: #646464;
      border-radius: 4px;
      padding: 0 10px;
      &:hover {
        border-color: #5edfff;
        background-color: #5edfff;
        color: #ffffff;
      }
      &.active {
        border-color: #5edfff;
        background-color: #5edfff;
        color: #ffffff;
      }
    }
  }
  .media {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .item-img {
      margin-right: 14px;
      img {
        border-radius: 50%;
      }
    }
    .media-body {
      position: relative;
    }
    .item-title {
      font-size: 14px;
      margin-bottom: 8px;
      line-height: 1;
      a {
        color: #000000;
        &:hover {
          color: #615dfa;
        }
      }
    }
    .item-member {
      font-size: 12px;
      color: #9e9faf;
      line-height: 1;
    }
  }
}
.widget-activity {
  .media {
    margin-bottom: 25px;
    .activity-time {
      font-size: 12px;
      color: #9e9faf;
      line-height: 1;
      font-weight: 600;
    }
    .item-title {
      font-weight: 400;
      color: #71728c;
      line-height: 18px;
      width: 80%;
      margin-bottom: 8px;
      .author-name {
        font-weight: 700;
      }
      .activity-link {
        font-weight: 600;
        color: #5edfff;
      }
    }
  }
}
.widget-banner {
  background-color: #ffca28;
  padding: 30px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  &:after {
    content: url("../../media/figure/square_shape.png");
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .item-subtitle {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 22px;
  }
  .item-btn {
    margin-bottom: 25px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 6px 22px;
    box-shadow: 0 10px 6px 0 rgba(0, 0, 0, 0.1);
    .btn-icon {
      margin-left: 5px;
    }
    svg {
      path {
        fill: #615dfa;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
    &:hover {
      background-color: #5edfff;
      color: #ffffff;
      svg {
        path {
          fill: #ffffff;
        }
      }
    }
  }
  .item-img {
    img {
      border-radius: 0 0 8px 8px;
    }
  }
}
.widget-user-about {
  .user-info {
    p {
      color: #9e9faf;
      font-size: 14px;
      line-height: 24px;
      margin-bottom: 15px;
    }
  }
  .info-list {
    li {
      font-size: 14px;
      margin-bottom: 6px;
      &:last-child {
        margin-bottom: 0;
      }
      span {
        color: #9e9faf;
        min-width: 75px;
        display: inline-block;
      }
      a {
        color: #5edfff;
      }
    }
    .social-share {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      .social-icon {
        a {
          color: #646464;
          font-size: 15px;
          padding: 0 5px;
          &:hover {
            color: #615dfa;
          }
          &:first-child {
            padding-left: 0;
          }
        }
      }
    }
  }
}
.widget-gallery {
  padding-bottom: 28px;
  .photo-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -2.5px;
    margin-right: -2.5px;
    li {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 33.333333%;
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      position: relative;
      width: 100%;
      padding-left: 2.5px;
      padding-right: 2.5px;
      margin-bottom: 5px;
      &:last-child {
        a {
          &:after {
            content: attr(data-photo);
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            z-index: 2;
            color: #ffffff;
            font-weight: 700;
          }
        }
      }
      a {
        overflow: hidden;
        border-radius: 4px;
        display: block;
        position: relative;
        text-align: center;
        img {
          border-radius: 4px;
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          width: 100%;
        }
        &:hover {
          img {
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
.widget-badges {
  padding-bottom: 20px;
  .badge-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -7.5px;
    margin-right: -7.5px;
    li {
      display: inline-block;
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 20%;
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
      position: relative;
      width: 100%;
      padding-left: 7.5px;
      padding-right: 7.5px;
      margin-bottom: 15px;
      a {
        text-align: center;
        height: 45px;
        width: 45px;
        line-height: 45px;
        border-radius: 50%;
        color: #ffffff;
        font-size: 20px;
        position: relative;
        &:before {
          content: "";
          height: 5px;
          width: 15px;
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 50%;
          position: absolute;
          top: 4px;
          right: 8px;
          -webkit-transform: rotate(25deg);
          -ms-transform: rotate(25deg);
          transform: rotate(25deg);
        }
      }
    }
  }
}
.widget-comment {
  .media {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .item-img {
      margin-right: 18px;
      a {
        overflow: hidden;
        border-radius: 4px;
      }
      img {
        border-radius: 4px;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    }
    .item-title {
      font-size: 16px;
      margin-bottom: 0;
      line-height: 20px;
      a {
        color: #000000;
        &:hover {
          color: #615dfa;
        }
      }
    }
    .post-date {
      font-size: 12px;
      font-weight: 600;
      color: #9e9faf;
      margin-bottom: 2px;
    }
    &:hover {
      .item-img {
        img {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
        }
      }
    }
  }
}
